/* === CLK: variables-v1.1 === */
/* ============================================================
   CLICKLIFY — DESIGN TOKEN SYSTEM
   File:    variables.css
   Version: v1.1 PRODUCTION
   Updated: 2026-05-31
   Note:    Changes increment the version number.
            All CSS in the system references these tokens.
            Never override tokens inline — update here only.
   ============================================================ */

/* ============================================================
   FONT LOADING — self-hosted, no Google Fonts CDN
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/wp-content/themes/hello-elementor-child/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Reduces layout shift on font swap by matching cap-height */
  size-adjust: 107%;
  ascent-override: 90%;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/wp-content/themes/hello-elementor-child/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   ROOT TOKENS
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TYPOGRAPHY — FONTS
  ---------------------------------------------------------- */

  --cl-font-primary:  'Inter', system-ui, -apple-system, sans-serif;
  --cl-font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;


  /* ----------------------------------------------------------
     TYPOGRAPHY — FLUID SCALE
     Uses clamp(min, preferred-vw, max)
     Test at 375px (min) and 1440px (max)
  ---------------------------------------------------------- */

  --cl-text-display:  clamp(3.5rem,  8vw,   7rem);     /* 56px → 112px — hero display only  */
  --cl-text-h1:       clamp(2.75rem, 6.5vw, 5.5rem);   /* 44px → 88px                       */
  --cl-text-h2:       clamp(2rem,    4.5vw, 3.75rem);   /* 32px → 60px                       */
  --cl-text-h3:       clamp(1.5rem,  2.8vw, 2.25rem);   /* 24px → 36px                       */
  --cl-text-h4:       clamp(1.125rem,1.8vw, 1.5rem);    /* 18px → 24px                       */
  --cl-text-body:     1rem;                              /* 16px — fixed, accessibility floor */
  --cl-text-lg:       1.125rem;                          /* 18px — lead paragraphs            */
  --cl-text-sm:       0.9375rem;                         /* 15px                              */
  --cl-text-xs:       0.8125rem;                         /* 13px                              */
  --cl-text-label:    0.75rem;                           /* 12px — eyebrow tags, badges       */
  --cl-text-mono:     0.875rem;                          /* 14px — code snippets              */

  /* Aliases kept for backward-compatibility */
  --cl-text-small:    var(--cl-text-sm);
  --cl-text-body-lg:  var(--cl-text-lg);


  /* ----------------------------------------------------------
     TYPOGRAPHY — WEIGHTS
  ---------------------------------------------------------- */

  --cl-fw-regular:    400;
  --cl-fw-medium:     500;
  --cl-fw-semibold:   600;
  --cl-fw-bold:       700;
  --cl-fw-extrabold:  800;
  --cl-fw-black:      900;


  /* ----------------------------------------------------------
     TYPOGRAPHY — LINE HEIGHTS
  ---------------------------------------------------------- */

  --cl-lh-none:    1;      /* Display, stat numbers          */
  --cl-lh-tight:   1.05;   /* H1 display headings            */
  --cl-lh-snug:    1.25;   /* H2, H3 section headings        */
  --cl-lh-base:    1.6;    /* H4, large body copy            */
  --cl-lh-loose:   1.8;    /* Body paragraphs                */
  --cl-lh-relaxed: 2.0;    /* Long-form / blog prose         */


  /* ----------------------------------------------------------
     TYPOGRAPHY — LETTER SPACING
  ---------------------------------------------------------- */

  --cl-ls-tighter: -0.06em;   /* H1 display — large tight      */
  --cl-ls-tight:   -0.03em;   /* H2, H3                        */
  --cl-ls-normal:   0em;      /* Body, H4                      */
  --cl-ls-wide:     0.07em;   /* Small labels, uppercase       */
  --cl-ls-wider:    0.12em;   /* Eyebrow / section tags        */

  /* Legacy aliases — do not use in new code */
  --cl-tracking-tight:  var(--cl-ls-tighter);
  --cl-tracking-snug:   var(--cl-ls-tight);
  --cl-tracking-normal: var(--cl-ls-normal);
  --cl-tracking-wide:   var(--cl-ls-wide);
  --cl-tracking-wider:  var(--cl-ls-wider);


  /* ----------------------------------------------------------
     SPACING — SEMANTIC SCALE
     4px base unit. Named semantically so usage is self-documenting.
  ---------------------------------------------------------- */

  --cl-space-2xs:  4px;     /* hairline gaps, icon nudges       */
  --cl-space-xs:   8px;     /* icon gaps, tight groups          */
  --cl-space-sm:   12px;    /* compact element spacing          */
  --cl-space-md:   16px;    /* default element spacing          */
  --cl-space-lg:   24px;    /* card internal padding (sm)       */
  --cl-space-xl:   32px;    /* card internal padding (lg)       */
  --cl-space-2xl:  48px;    /* section sub-spacing              */
  --cl-space-3xl:  64px;    /* between major content groups     */
  --cl-space-4xl:  80px;    /* section spacing (mobile)         */
  --cl-space-5xl:  96px;    /* section spacing (tablet)         */
  --cl-space-6xl:  120px;   /* section spacing (desktop)        */
  --cl-space-7xl:  160px;   /* hero padding, large sections     */


  /* ----------------------------------------------------------
     CONTAINERS
  ---------------------------------------------------------- */

  --cl-container-xs:   480px;   /* very narrow — modals, toasts  */
  --cl-container-sm:   640px;   /* narrow content column         */
  --cl-container-md:   760px;   /* readable body copy width      */
  --cl-container-lg:   1024px;  /* standard layout               */
  --cl-container-xl:   1240px;  /* primary site container        */
  --cl-container-2xl:  1440px;  /* max bleed width               */

  --cl-gutter-desktop: 80px;    /* horizontal page margin        */
  --cl-gutter-tablet:  40px;
  --cl-gutter-mobile:  20px;


  /* ----------------------------------------------------------
     COLOR — BACKGROUNDS
  ---------------------------------------------------------- */

  --cl-color-bg:          #050816;   /* Primary page background        */
  --cl-color-bg-alt:      #080D1C;   /* Alternate dark section         */
  --cl-color-bg-raised:   #0C1022;   /* Slightly elevated panel        */
  --cl-color-bg-cta:      #0A0A1A;   /* CTA section base               */


  /* ----------------------------------------------------------
     COLOR — SURFACES (layered depth on dark UI)
  ---------------------------------------------------------- */

  --cl-color-surface-0:   rgba(255, 255, 255, 0.02);   /* Ghost — barely there  */
  --cl-color-surface-1:   rgba(255, 255, 255, 0.04);   /* Default card          */
  --cl-color-surface-2:   rgba(255, 255, 255, 0.07);   /* Hover state           */
  --cl-color-surface-3:   rgba(255, 255, 255, 0.10);   /* Active / pressed      */
  --cl-color-surface-4:   rgba(255, 255, 255, 0.14);   /* High-emphasis         */

  /* Semantic aliases for common patterns */
  --cl-color-surface:       var(--cl-color-surface-1);
  --cl-color-surface-hover: var(--cl-color-surface-2);
  --cl-color-surface-glass: rgba(5, 8, 22, 0.85);      /* Header glass / modal  */


  /* ----------------------------------------------------------
     COLOR — BORDERS
  ---------------------------------------------------------- */

  --cl-color-border:        rgba(255, 255, 255, 0.08);
  --cl-color-border-hover:  rgba(255, 255, 255, 0.18);
  --cl-color-border-focus:  rgba(124, 92, 255, 0.65);
  --cl-color-border-strong: rgba(255, 255, 255, 0.25);
  --cl-color-border-subtle: rgba(255, 255, 255, 0.04);


  /* ----------------------------------------------------------
     COLOR — BRAND ACCENT
     Primary: electric violet — CTAs, links, active states
     Secondary: sky blue — AI/tech sections only, max 2/page
  ---------------------------------------------------------- */

  --cl-color-primary:         #7C5CFF;
  --cl-color-primary-hover:   #6B4AEE;
  --cl-color-primary-active:  #5A3ADD;
  --cl-color-primary-glow:    rgba(124, 92, 255, 0.20);
  --cl-color-primary-subtle:  rgba(124, 92, 255, 0.08);
  --cl-color-primary-dim:     rgba(124, 92, 255, 0.12);

  --cl-color-secondary:       #00D4FF;
  --cl-color-secondary-glow:  rgba(0, 212, 255, 0.12);
  --cl-color-secondary-dim:   rgba(0, 212, 255, 0.08);


  /* ----------------------------------------------------------
     COLOR — TEXT
  ---------------------------------------------------------- */

  --cl-color-text:          #F5F7FF;   /* Primary — near white (not harsh) */
  --cl-color-text-muted:    #9EA6C3;   /* Secondary — 6.5:1 contrast ✅    */
  --cl-color-text-subtle:   #6B7494;   /* Tertiary — captions only          */
  --cl-color-text-inverse:  #050816;   /* On light backgrounds              */
  --cl-color-text-accent:   #7C5CFF;   /* Highlighted/linked text           */


  /* ----------------------------------------------------------
     COLOR — SEMANTIC
  ---------------------------------------------------------- */

  --cl-color-success:       #10B981;
  --cl-color-success-dim:   rgba(16, 185, 129, 0.12);
  --cl-color-warning:       #F59E0B;
  --cl-color-warning-dim:   rgba(245, 158, 11, 0.12);
  --cl-color-error:         #EF4444;
  --cl-color-error-dim:     rgba(239, 68, 68, 0.12);
  --cl-color-info:          #3B82F6;
  --cl-color-info-dim:      rgba(59, 130, 246, 0.12);


  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

  --cl-radius-xs:   4px;      /* Fine details, code blocks       */
  --cl-radius-sm:   8px;      /* Buttons, inputs, small badges   */
  --cl-radius-md:   14px;     /* Cards (small), dropdowns        */
  --cl-radius-lg:   20px;     /* Standard cards                  */
  --cl-radius-xl:   28px;     /* Large panels, hero elements     */
  --cl-radius-2xl:  40px;     /* Feature cards, large UI         */
  --cl-radius-pill: 9999px;   /* Tags, badges, pills             */
  --cl-radius-circle: 50%;    /* Avatars, circular icons         */


  /* ----------------------------------------------------------
     SHADOWS
     On dark UI, depth comes from surface shifts + border opacity.
     These shadows are used on hover states and elevated components.
  ---------------------------------------------------------- */

  --cl-shadow-xs:      0 2px 8px  rgba(0, 0, 0, 0.25);
  --cl-shadow-soft:    0 4px 24px rgba(0, 0, 0, 0.20);
  --cl-shadow-medium:  0 8px 40px rgba(0, 0, 0, 0.30);
  --cl-shadow-large:   0 20px 60px rgba(0, 0, 0, 0.50);
  --cl-shadow-glow:    0 0 40px rgba(124, 92, 255, 0.18);
  --cl-shadow-glow-sm: 0 0 20px rgba(124, 92, 255, 0.14);
  --cl-shadow-glow-lg: 0 0 80px rgba(124, 92, 255, 0.25);
  --cl-shadow-glow-secondary: 0 0 40px rgba(0, 212, 255, 0.14);


  /* ----------------------------------------------------------
     TRANSITIONS & EASING
  ---------------------------------------------------------- */

  --cl-transition-fast:   150ms ease;   /* Button press, active states     */
  --cl-transition-base:   260ms ease;   /* Hover, standard interactions    */
  --cl-transition-slow:   420ms ease;   /* Reveal, layout transitions      */

  /* Named easing curves — for complex animations */
  --cl-ease-out:    cubic-bezier(0.00, 0.00, 0.20, 1.00);   /* Entrances   */
  --cl-ease-in:     cubic-bezier(0.40, 0.00, 1.00, 1.00);   /* Exits       */
  --cl-ease-inout:  cubic-bezier(0.40, 0.00, 0.20, 1.00);   /* Standard    */
  --cl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);   /* Rare only   */

  /* Hover transform values — reuse across components */
  --cl-hover-lift-sm: translateY(-2px);
  --cl-hover-lift-md: translateY(-4px);
  --cl-hover-lift-lg: translateY(-6px);


  /* ----------------------------------------------------------
     Z-INDEX SYSTEM — layered hierarchy
  ---------------------------------------------------------- */

  --cl-z-base:     0;
  --cl-z-raised:   1;
  --cl-z-card:     10;
  --cl-z-sticky:   100;
  --cl-z-header:   1000;
  --cl-z-dropdown: 1050;
  --cl-z-overlay:  1100;
  --cl-z-modal:    1200;
  --cl-z-toast:    1300;
  --cl-z-tooltip:  1400;
  --cl-z-cursor:   9999;


  /* ----------------------------------------------------------
     SURFACE COMPOSITE TOKENS
     Ready-to-use surface definitions for common components.
     Reference these in component CSS rather than raw rgba values.
  ---------------------------------------------------------- */

  /* Standard card */
  --cl-surface-card:            var(--cl-color-surface-1);
  --cl-surface-card-hover:      var(--cl-color-surface-2);
  --cl-surface-card-border:     var(--cl-color-border);
  --cl-surface-card-border-hover: var(--cl-color-border-hover);
  --cl-surface-card-radius:     var(--cl-radius-lg);
  --cl-surface-card-padding:    var(--cl-space-xl);
  --cl-surface-card-shadow-hover: var(--cl-shadow-medium);

  /* Dashboard panel */
  --cl-surface-dash:            rgba(5, 8, 22, 0.70);
  --cl-surface-dash-border:     var(--cl-color-border);
  --cl-surface-dash-radius:     var(--cl-radius-lg);

  /* Glass (header scroll / modal) */
  --cl-surface-glass:           rgba(5, 8, 22, 0.85);
  --cl-surface-glass-blur:      blur(20px);
  --cl-surface-glass-border:    var(--cl-color-border);

  /* Hero section background layers */
  --cl-surface-hero-glow-a:
    radial-gradient(ellipse 70% 60% at 15% 40%, rgba(124, 92, 255, 0.14) 0%, transparent 70%);
  --cl-surface-hero-glow-b:
    radial-gradient(ellipse 50% 40% at 85% 65%, rgba(0, 212, 255, 0.07) 0%, transparent 70%);
  --cl-surface-grid-overlay:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);


  /* ----------------------------------------------------------
     COMPONENT DIMENSION TOKENS
     Global named dimensions for layout-aware components.
     Update here when a component's physical size changes.
  ---------------------------------------------------------- */

  --cl-header-height:          72px;    /* Default (not scrolled)  */
  --cl-header-height-scrolled: 60px;    /* Scrolled / compact      */


  /* ----------------------------------------------------------
     BUTTON TOKENS
     Shared values — consumed by .cl-btn-* classes
  ---------------------------------------------------------- */

  --cl-btn-radius:        var(--cl-radius-sm);     /* 8px */
  --cl-btn-padding-y:     0.75rem;                 /* 12px */
  --cl-btn-padding-x:     1.5rem;                  /* 24px */
  --cl-btn-padding-y-lg:  1rem;                    /* 16px */
  --cl-btn-padding-x-lg:  2rem;                    /* 32px */
  --cl-btn-font-size:     var(--cl-text-body);
  --cl-btn-font-weight:   var(--cl-fw-semibold);
  --cl-btn-transition:    var(--cl-transition-fast);

}


/* ============================================================
   BASE RESET & GLOBAL DEFAULTS
   Minimal, opinionated, Elementor-compatible
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family:             var(--cl-font-primary);
  font-size:               var(--cl-text-body);
  font-weight:             var(--cl-fw-regular);
  line-height:             var(--cl-lh-loose);
  color:                   var(--cl-color-text);
  background-color:        var(--cl-color-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  font-optical-sizing:     auto;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--cl-font-primary);
  color:          var(--cl-color-text);
  line-height:    var(--cl-lh-tight);
}

h1 {
  font-size:      var(--cl-text-h1);
  font-weight:    var(--cl-fw-extrabold);
  letter-spacing: var(--cl-ls-tighter);
  line-height:    var(--cl-lh-tight);
}

h2 {
  font-size:      var(--cl-text-h2);
  font-weight:    var(--cl-fw-bold);
  letter-spacing: var(--cl-ls-tight);
  line-height:    var(--cl-lh-snug);
}

h3 {
  font-size:      var(--cl-text-h3);
  font-weight:    var(--cl-fw-bold);
  letter-spacing: var(--cl-ls-tight);
  line-height:    var(--cl-lh-snug);
}

h4 {
  font-size:      var(--cl-text-h4);
  font-weight:    var(--cl-fw-semibold);
  letter-spacing: var(--cl-ls-normal);
  line-height:    var(--cl-lh-base);
}

p {
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  max-width:   68ch;
}

code, pre, kbd {
  font-family: var(--cl-font-mono);
  font-size:   var(--cl-text-mono);
}


/* ============================================================
   UTILITY CLASSES — Global foundation
   Keep these minimal. Component-specific CSS lives in components/.
   ============================================================ */

/* Container */
.cl-container {
  width: 100%;
  max-width: var(--cl-container-xl);
  margin-inline: auto;
  padding-inline: var(--cl-gutter-mobile);
}

@media (min-width: 768px) {
  .cl-container { padding-inline: var(--cl-gutter-tablet); }
}

@media (min-width: 1280px) {
  .cl-container { padding-inline: var(--cl-gutter-desktop); }
}

.cl-container--sm  { max-width: var(--cl-container-sm); }
.cl-container--md  { max-width: var(--cl-container-md); }
.cl-container--lg  { max-width: var(--cl-container-lg); }
.cl-container--2xl { max-width: var(--cl-container-2xl); }


/* Section */
.cl-section {
  padding-block: var(--cl-space-4xl);
}

@media (min-width: 768px) {
  .cl-section { padding-block: var(--cl-space-5xl); }
}

@media (min-width: 1280px) {
  .cl-section { padding-block: var(--cl-space-6xl); }
}

.cl-section--alt {
  background:    var(--cl-color-bg-alt);
  border-top:    1px solid var(--cl-color-border);
  border-bottom: 1px solid var(--cl-color-border);
}

.cl-section--cta {
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(124, 92, 255, 0.10) 0%, transparent 70%),
    var(--cl-color-bg-alt);
  border-top:    1px solid var(--cl-color-border);
  border-bottom: 1px solid var(--cl-color-border);
}


/* Hero background */
.cl-hero-bg {
  position:   relative;
  background: var(--cl-color-bg);
  overflow:   hidden;
}

.cl-hero-bg::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:
    var(--cl-surface-hero-glow-a),
    var(--cl-surface-hero-glow-b);
  pointer-events: none;
  z-index:        0;
}

.cl-hero-bg::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: var(--cl-surface-grid-overlay);
  background-size:  48px 48px;
  pointer-events:   none;
  z-index:          0;
}

.cl-hero-bg > * {
  position: relative;
  z-index:  1;
}


/* Card */
.cl-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-surface-card-border);
  border-radius: var(--cl-surface-card-radius);
  padding:       var(--cl-surface-card-padding);
  transition:
    background      var(--cl-transition-base) ease,
    border-color    var(--cl-transition-base) ease,
    transform       var(--cl-transition-base) var(--cl-ease-out),
    box-shadow      var(--cl-transition-base) var(--cl-ease-out);
}

.cl-card:hover {
  background:   var(--cl-surface-card-hover);
  border-color: var(--cl-surface-card-border-hover);
  transform:    var(--cl-hover-lift-lg);
  box-shadow:   var(--cl-surface-card-shadow-hover);
}

@media (max-width: 767px) {
  .cl-card { padding: var(--cl-space-lg); }
}

.cl-card--featured {
  border-color: var(--cl-color-primary);
  box-shadow:   0 0 32px var(--cl-color-primary-glow);
}

.cl-card--featured:hover {
  box-shadow: 0 0 48px var(--cl-color-primary-glow), var(--cl-shadow-medium);
}


/* Glass surface */
.cl-glass {
  background:              var(--cl-surface-glass);
  backdrop-filter:         var(--cl-surface-glass-blur);
  -webkit-backdrop-filter: var(--cl-surface-glass-blur);
  border:                  1px solid var(--cl-surface-glass-border);
}


/* Button base */
.cl-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         var(--cl-btn-padding-y) var(--cl-btn-padding-x);
  font-family:     var(--cl-font-primary);
  font-size:       var(--cl-btn-font-size);
  font-weight:     var(--cl-btn-font-weight);
  line-height:     1;
  border-radius:   var(--cl-btn-radius);
  transition:      var(--cl-btn-transition);
  cursor:          pointer;
  white-space:     nowrap;
  user-select:     none;
  border:          none;
  text-decoration: none;
}

.cl-btn--primary {
  background: var(--cl-color-primary);
  color:      #ffffff;
}

.cl-btn--primary:hover {
  background:  var(--cl-color-primary-hover);
  transform:   var(--cl-hover-lift-sm);
  box-shadow:  0 8px 24px var(--cl-color-primary-glow);
}

.cl-btn--primary:active {
  transform:  translateY(0) scale(0.98);
  box-shadow: none;
}

.cl-btn--ghost {
  background:  transparent;
  color:       var(--cl-color-text);
  border:      1px solid rgba(255, 255, 255, 0.22);
}

.cl-btn--ghost:hover {
  border-color: var(--cl-color-border-strong);
  background:   var(--cl-color-surface-1);
  transform:    var(--cl-hover-lift-sm);
}

.cl-btn--lg {
  padding:   var(--cl-btn-padding-y-lg) var(--cl-btn-padding-x-lg);
  font-size: var(--cl-text-lg);
}


/* Label / eyebrow tag */
.cl-label {
  display:        inline-flex;
  align-items:    center;
  gap:            0.375rem;
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  letter-spacing: var(--cl-ls-wider);
  text-transform: uppercase;
  color:          var(--cl-color-primary);
  padding:        0.3rem 0.75rem;
  background:     var(--cl-color-primary-dim);
  border:         1px solid rgba(124, 92, 255, 0.20);
  border-radius:  var(--cl-radius-pill);
}


/* Code / monospace inline */
.cl-code {
  font-family:   var(--cl-font-mono);
  font-size:     var(--cl-text-mono);
  color:         var(--cl-color-secondary);
  background:    var(--cl-color-secondary-dim);
  padding:       0.125em 0.375em;
  border-radius: var(--cl-radius-xs);
}


/* Reveal (scroll entrance — JS adds .is-visible) */
.cl-reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition:
    opacity   var(--cl-transition-slow) var(--cl-ease-out),
    transform var(--cl-transition-slow) var(--cl-ease-out);
  will-change: opacity, transform;
}

.cl-reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.cl-reveal-fade {
  opacity:    0;
  transition: opacity var(--cl-transition-slow) var(--cl-ease-out);
}

.cl-reveal-fade.is-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .cl-reveal { transform: translateY(16px); }
}

/* Stagger children */
.cl-stagger > *:nth-child(1) { transition-delay: 0ms;   }
.cl-stagger > *:nth-child(2) { transition-delay: 80ms;  }
.cl-stagger > *:nth-child(3) { transition-delay: 160ms; }
.cl-stagger > *:nth-child(4) { transition-delay: 240ms; }
.cl-stagger > *:nth-child(5) { transition-delay: 320ms; }
.cl-stagger > *:nth-child(6) { transition-delay: 400ms; }


/* ============================================================
   ACCESSIBILITY — FOCUS MANAGEMENT
   ============================================================ */

*:focus {
  outline: none;
}

*:focus-visible {
  outline:        2px solid var(--cl-color-primary);
  outline-offset: 3px;
  border-radius:  4px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline:       2px solid var(--cl-color-primary);
  outline-offset: 4px;
  border-radius: var(--cl-radius-sm);
  box-shadow:    0 0 0 4px var(--cl-color-primary-subtle);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:      none;
  border-color: var(--cl-color-primary);
  box-shadow:   0 0 0 3px var(--cl-color-primary-subtle);
}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   All animations must respect this preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }

  .cl-reveal,
  .cl-reveal-fade,
  [data-reveal] {
    opacity:   1 !important;
    transform: none !important;
  }
}


/* ============================================================
   SELECTION STYLES
   ============================================================ */

::selection {
  background-color: rgba(124, 92, 255, 0.35);
  color: var(--cl-color-text);
}

::-moz-selection {
  background-color: rgba(124, 92, 255, 0.35);
  color: var(--cl-color-text);
}


/* ============================================================
   SCROLLBAR — subtle, dark-UI appropriate
   ============================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cl-color-bg); }
::-webkit-scrollbar-thumb {
  background:    var(--cl-color-border);
  border-radius: var(--cl-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--cl-color-border-hover); }


/* ============================================================
   TAP HIGHLIGHT — remove on mobile
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }


/* ============================================================
   SAFE AREA INSETS — modern mobile devices (notch, home bar)
   Use for: sticky header padding, mobile menu, full-screen overlays.
   ============================================================ */

:root {
  --cl-safe-top:    env(safe-area-inset-top,    0px);
  --cl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cl-safe-left:   env(safe-area-inset-left,   0px);
  --cl-safe-right:  env(safe-area-inset-right,  0px);
}


/* ============================================================
   LIGHT THEME — placeholder structure (future use)
   Dashboard, client portal, SaaS layer, or admin system.
   Currently unused — add token overrides here when needed.
   ============================================================ */

:root[data-theme="light"] {
  /* --cl-color-bg:       #ffffff; */
  /* --cl-color-text:     #0A0A0A; */
  /* --cl-color-border:   rgba(0, 0, 0, 0.08); */
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   (Custom properties cannot store breakpoints — documented here)

   Base:     375px  → mobile baseline, no query
   Tablet:   768px  → @media (min-width: 768px)
   Laptop:   1024px → @media (min-width: 1024px)
   Desktop:  1280px → @media (min-width: 1280px)
   Wide:     1440px → @media (min-width: 1440px)
   Ultra:    1920px → @media (min-width: 1920px)

   Rule:     Always mobile-first (min-width).
   Never:    max-width queries except for targeted overrides.
   ============================================================ */

/* === /CLK: variables-v1.1 === */

/* === CLK: utility-class-system-v1.0 === */
/* =========================
   LAYOUT UTILITIES
   ========================= */

.cl-container {
  width: min(92%, var(--cl-container-width));
  margin-inline: auto;
}

.cl-content-width {
  max-width: var(--cl-content-width);
}

/* =========================
   DISPLAY UTILITIES
   ========================= */

.cl-flex {
  display: flex;
}

.cl-grid {
  display: grid;
}

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

/* =========================
   SPACING UTILITIES
   ========================= */

.cl-section-space {
  padding-block: var(--cl-space-120);
}

.cl-gap-16 {
  gap: var(--cl-space-16);
}

.cl-gap-24 {
  gap: var(--cl-space-24);
}

.cl-gap-32 {
  gap: var(--cl-space-32);
}

/* =========================
   TEXT UTILITIES
   ========================= */

.cl-text-center {
  text-align: center;
}

.cl-text-muted {
  color: var(--cl-color-text-muted);
}

/* =========================
   SURFACE UTILITIES
   ========================= */

.cl-surface {
  background: var(--cl-color-surface);
  border: 1px solid var(--cl-color-border);
}

.cl-radius-lg {
  border-radius: var(--cl-radius-lg);
}

/* =========================
   BUTTON UTILITIES
   ========================= */

.cl-btn-primary {
  background: var(--cl-color-primary);
  color: white;
}

.cl-btn-secondary {
  background: transparent;
  border: 1px solid var(--cl-color-border);
}

/* =========================
   RESPONSIVE UTILITIES
   ========================= */

@media (max-width: 768px) {

  .cl-section-space {
    padding-block: var(--cl-space-64);
  }

}

/* === /CLK: utility-class-system-v1.0 === */

/* === CLK: test === */
body { color: red; }
/* === /CLK: test === */

/* === CLK: test-diagnostic === */
body { background: #050816; color: #F5F7FF; }
/* === /CLK: test-diagnostic === */

/* === CLK: components-v1.0 === */
/* ============================================================
   CLICKLIFY — COMPONENT STYLES
   File:    components.css
   Version: v1.0
   Depends: variables.css (tokens must load first)
   ============================================================ */


/* ============================================================
   HEADER SYSTEM
   ============================================================ */

.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--cl-z-header);
  width: 100%;
}

/* Offset body content so it doesn't hide under fixed header */
body { padding-top: var(--cl-header-height); }

/* Main header bar */
.elementor-element-a3f8b2c1 {
  background: var(--cl-surface-glass);
  backdrop-filter: var(--cl-surface-glass-blur);
  -webkit-backdrop-filter: var(--cl-surface-glass-blur);
  border-bottom: 1px solid var(--cl-color-border);
  height: var(--cl-header-height);
  transition: background var(--cl-transition-base) ease, box-shadow var(--cl-transition-base) ease;
}

/* Logo heading in header */
.elementor-location-header .elementor-widget-heading .elementor-heading-title a {
  font-family: var(--cl-font-primary) !important;
  font-weight: var(--cl-fw-black) !important;
  font-size: 1.125rem !important;
  letter-spacing: var(--cl-ls-wide) !important;
  color: var(--cl-color-text) !important;
  text-decoration: none !important;
}

/* Nav links in header */
.elementor-location-header .elementor-element-e7j2f6g5 .elementor-heading-title a {
  font-family: var(--cl-font-primary) !important;
  font-size: var(--cl-text-sm) !important;
  font-weight: var(--cl-fw-medium) !important;
  color: var(--cl-color-text-muted) !important;
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: var(--cl-radius-sm);
  display: block;
  transition: color var(--cl-transition-fast) ease, background var(--cl-transition-fast) ease;
}

.elementor-location-header .elementor-element-e7j2f6g5 .elementor-heading-title a:hover {
  color: var(--cl-color-text) !important;
  background: var(--cl-color-surface-hover);
}

/* Header CTA buttons */
.elementor-location-header .elementor-widget-button .elementor-button {
  font-family: var(--cl-font-primary) !important;
  font-weight: var(--cl-fw-semibold) !important;
  font-size: var(--cl-text-sm) !important;
  border-radius: var(--cl-radius-sm) !important;
  transition: all var(--cl-transition-fast) ease !important;
}

.elementor-location-header #btnvsvc01 .elementor-button {
  background: transparent !important;
  color: var(--cl-color-text-muted) !important;
  border: 1px solid var(--cl-color-border) !important;
}

.elementor-location-header #btnvsvc01 .elementor-button:hover {
  border-color: var(--cl-color-border-hover) !important;
  color: var(--cl-color-text) !important;
}

.elementor-location-header #btnbook01 .elementor-button {
  background: var(--cl-color-primary) !important;
  color: #fff !important;
  border: none !important;
}

.elementor-location-header #btnbook01 .elementor-button:hover {
  background: var(--cl-color-primary-hover) !important;
}

/* Mobile menu overlay */
.elementor-element-mobmenu1 {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--cl-z-modal) !important;
  background: rgba(5, 8, 22, 0.97) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
  display: flex !important;
  align-items: flex-start !important;
}

.elementor-element-mobmenu1.cl-menu-open {
  opacity: 1;
  visibility: visible;
}

.elementor-element-mobmenu1 .elementor-heading-title a {
  color: var(--cl-color-text) !important;
  font-size: 1.5rem !important;
  font-weight: var(--cl-fw-semibold) !important;
  text-decoration: none !important;
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--cl-color-border);
}

.cl-mobile-nav__item:last-child .elementor-heading-title a {
  border-bottom: none !important;
}

/* Hamburger */
.cl-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--cl-radius-sm);
  transition: background var(--cl-transition-fast) ease;
}

.cl-hamburger:hover { background: var(--cl-color-surface-hover); }

.cl-hamburger__line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cl-color-text);
  border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}

.cl-hamburger.is-active .cl-hamburger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cl-hamburger.is-active .cl-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cl-hamburger.is-active .cl-hamburger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.cl-mobile-menu__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--cl-color-text-muted);
}


/* ============================================================
   FOOTER
   ============================================================ */

.elementor-location-footer {
  border-top: 1px solid var(--cl-color-border);
  background: var(--cl-color-bg-alt);
}

.cl-footer-positioning-line {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  text-align: center;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--cl-color-border);
  margin-bottom: 48px;
  max-width: none;
}

.cl-footer-logo-wordmark {
  font-family: var(--cl-font-primary);
  font-size: 1.25rem;
  font-weight: var(--cl-fw-black);
  letter-spacing: var(--cl-ls-wide);
  color: var(--cl-color-text);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.cl-footer-brand-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  max-width: 30ch;
  margin-bottom: 12px;
}

.cl-footer-brand-philosophy {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  font-style: italic;
  max-width: none;
}

.cl-footer-heading {
  font-family: var(--cl-font-primary);
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-ls-wider);
  text-transform: uppercase;
  color: var(--cl-color-text-muted);
  margin-bottom: 16px;
  max-width: none;
}

.cl-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cl-footer-links a {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  text-decoration: none;
  transition: color var(--cl-transition-fast) ease;
}

.cl-footer-links a:hover { color: var(--cl-color-text); }

.cl-footer-email {
  display: block;
  font-size: var(--cl-text-sm);
  color: var(--cl-color-primary);
  text-decoration: none;
  margin-bottom: 8px;
}

.cl-footer-location,
.cl-footer-availability {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  max-width: none;
  margin-bottom: 4px;
}

.cl-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  margin-top: 48px;
  border-top: 1px solid var(--cl-color-border);
}

.cl-footer-copyright,
.cl-footer-build {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  max-width: none;
  margin: 0;
}

.cl-footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cl-footer-legal a {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  text-decoration: none;
  transition: color var(--cl-transition-fast) ease;
}

.cl-footer-legal a:hover { color: var(--cl-color-text-muted); }


/* ============================================================
   SERVICE CARDS
   ============================================================ */

.cl-service-card {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-xl);
  transition:
    background var(--cl-transition-base) ease,
    border-color var(--cl-transition-base) ease,
    transform var(--cl-transition-base) var(--cl-ease-out),
    box-shadow var(--cl-transition-base) var(--cl-ease-out);
}

.cl-service-card:hover {
  background: var(--cl-color-surface-2);
  border-color: var(--cl-color-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--cl-shadow-medium);
}

.cl-service-icon {
  width: 40px;
  height: 40px;
  background: var(--cl-color-primary-dim);
  border: 1px solid rgba(124, 92, 255, 0.20);
  border-radius: var(--cl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--cl-space-lg);
}

.cl-service-title {
  font-size: var(--cl-text-h4) !important;
  font-weight: var(--cl-fw-bold) !important;
  color: var(--cl-color-text) !important;
  margin-bottom: var(--cl-space-xs) !important;
  letter-spacing: var(--cl-ls-tight) !important;
}

.cl-service-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  margin-bottom: var(--cl-space-md);
  max-width: none;
}

.cl-service-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-service-meta li {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  background: var(--cl-color-surface-0);
  border: 1px solid var(--cl-color-border-subtle);
  border-radius: var(--cl-radius-pill);
  padding: 3px 10px;
}


/* ============================================================
   TRUST ROW (hero stats)
   ============================================================ */

.cl-trust-row {
  display: flex;
  align-items: center;
  gap: var(--cl-space-lg);
  flex-wrap: wrap;
}

.cl-trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-trust-stat {
  font-family: var(--cl-font-primary);
  font-size: 1.25rem;
  font-weight: var(--cl-fw-extrabold);
  color: var(--cl-color-text);
  letter-spacing: var(--cl-ls-tight);
  line-height: 1;
}

.cl-trust-label {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  letter-spacing: var(--cl-ls-wide);
}

.cl-trust-divider {
  width: 1px;
  height: 32px;
  background: var(--cl-color-border);
}


/* ============================================================
   HERO ACTIONS
   ============================================================ */

.cl-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  flex-wrap: wrap;
}

.cl-hero-actions .cl-btn--primary,
.cl-hero-actions a[class*="cl-btn--primary"] {
  padding: var(--cl-btn-padding-y-lg) var(--cl-btn-padding-x-lg);
  font-size: var(--cl-text-lg);
}


/* ============================================================
   PROCESS CARDS
   ============================================================ */

.cl-process-card {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-xl);
  position: relative;
}

.cl-process-step {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  margin-bottom: var(--cl-space-md);
}

.cl-process-num {
  font-family: var(--cl-font-mono);
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-bold);
  color: var(--cl-color-primary);
  letter-spacing: var(--cl-ls-wider);
  background: var(--cl-color-primary-dim);
  border: 1px solid rgba(124, 92, 255, 0.20);
  border-radius: var(--cl-radius-sm);
  padding: 4px 10px;
}

.cl-process-connector {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.30), transparent);
}

.cl-process-title {
  font-size: var(--cl-text-h4) !important;
  font-weight: var(--cl-fw-bold) !important;
  color: var(--cl-color-text) !important;
  margin-bottom: var(--cl-space-xs) !important;
  letter-spacing: var(--cl-ls-tight) !important;
}

.cl-process-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  margin-bottom: var(--cl-space-sm);
  max-width: none;
}

.cl-process-meta {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  max-width: none;
  margin: 0;
}


/* ============================================================
   AI GRID
   ============================================================ */

.cl-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-space-md);
}

@media (max-width: 767px) {
  .cl-ai-grid { grid-template-columns: 1fr; }
}

.cl-ai-block {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
  padding: var(--cl-space-lg);
  transition: background var(--cl-transition-base) ease, border-color var(--cl-transition-base) ease;
}

.cl-ai-block:hover {
  background: var(--cl-color-surface-2);
  border-color: var(--cl-color-border-hover);
}

.cl-ai-block-header {
  display: flex;
  align-items: center;
  gap: var(--cl-space-xs);
  margin-bottom: var(--cl-space-sm);
}

.cl-ai-block-icon {
  width: 28px;
  height: 28px;
  background: var(--cl-color-primary-dim);
  border: 1px solid rgba(124, 92, 255, 0.20);
  border-radius: var(--cl-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cl-ai-block-title {
  font-size: var(--cl-text-sm) !important;
  font-weight: var(--cl-fw-semibold) !important;
  color: var(--cl-color-text) !important;
  letter-spacing: var(--cl-ls-tight) !important;
}

.cl-ai-block-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  margin-bottom: var(--cl-space-xs);
  max-width: none;
}

.cl-ai-meta {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  max-width: none;
  margin: 0;
}


/* ============================================================
   STATS
   ============================================================ */

.cl-stats-eyebrow {
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-ls-wider);
  text-transform: uppercase;
  color: var(--cl-color-text-muted);
  text-align: center;
  margin-bottom: var(--cl-space-2xl);
  max-width: none;
}

.cl-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cl-space-lg);
}

@media (max-width: 1023px) {
  .cl-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .cl-stats-grid { grid-template-columns: 1fr; }
}

.cl-stat {
  text-align: center;
  padding: var(--cl-space-lg);
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
}

.cl-stat-value {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--cl-fw-extrabold);
  color: var(--cl-color-text);
  letter-spacing: var(--cl-ls-tighter);
  line-height: 1;
  margin-bottom: 8px;
}

.cl-stat-value--anchor {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.cl-stat-label {
  font-size: var(--cl-text-sm);
  font-weight: var(--cl-fw-semibold);
  color: var(--cl-color-text);
  margin-bottom: 6px;
  max-width: none;
}

.cl-stat-meta {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  line-height: var(--cl-lh-base);
  max-width: none;
  margin: 0;
}

/* Authority section stat items (different component) */
.cl-stat-item {
  padding: var(--cl-space-lg);
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
}

.cl-stat-item--anchor .cl-stat-value {
  font-size: clamp(1.75rem, 4vw, 3rem);
}


/* ============================================================
   AUTHORITY SECTION
   ============================================================ */

.cl-authority-lead p {
  font-size: var(--cl-text-lg);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin-bottom: var(--cl-space-md);
  max-width: 62ch;
}

.cl-authority-attrs {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-md);
  margin-top: var(--cl-space-xl);
}

.cl-attr-block {
  padding: var(--cl-space-lg);
  border-left: 2px solid var(--cl-color-primary);
  background: var(--cl-color-surface-1);
  border-radius: 0 var(--cl-radius-sm) var(--cl-radius-sm) 0;
}

.cl-attr-block--last {
  border-left-color: var(--cl-color-secondary);
}

.cl-attr-head {
  margin-bottom: var(--cl-space-xs);
}

.cl-attr-title {
  font-size: var(--cl-text-sm) !important;
  font-weight: var(--cl-fw-semibold) !important;
  color: var(--cl-color-text) !important;
  letter-spacing: 0 !important;
}

.cl-attr-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  max-width: none;
  margin: 0;
}

/* Evolution strip */
.cl-evo-strip {
  display: flex;
  align-items: center;
  gap: var(--cl-space-xs);
  flex-wrap: wrap;
  padding: var(--cl-space-md) var(--cl-space-lg);
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-pill);
  margin-bottom: var(--cl-space-lg);
}

.cl-evo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cl-evo-year {
  font-family: var(--cl-font-mono);
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-bold);
  color: var(--cl-color-primary);
}

.cl-evo-label {
  font-size: 10px;
  color: var(--cl-color-text-subtle);
  letter-spacing: 0.05em;
}

.cl-evo-arrow {
  color: var(--cl-color-text-subtle);
  font-size: var(--cl-text-xs);
}

/* Philosophy block */
.cl-philosophy-block {
  border: 1px solid var(--cl-color-border);
  border-left: 3px solid var(--cl-color-primary);
  background: var(--cl-color-surface-1);
  border-radius: 0 var(--cl-radius-md) var(--cl-radius-md) 0;
  padding: var(--cl-space-lg) var(--cl-space-xl);
  margin-top: var(--cl-space-lg);
}

.cl-philosophy-block p {
  font-size: var(--cl-text-h4);
  font-weight: var(--cl-fw-medium);
  color: var(--cl-color-text);
  font-style: italic;
  line-height: var(--cl-lh-snug);
  letter-spacing: var(--cl-ls-tight);
  max-width: 52ch;
  margin: 0;
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.cl-testimonial {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-xl);
  position: relative;
  transition: background var(--cl-transition-base) ease;
}

.cl-testimonial:hover {
  background: var(--cl-color-surface-2);
}

.cl-testimonial-mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--cl-color-primary);
  opacity: 0.4;
  display: block;
  margin-bottom: var(--cl-space-sm);
  font-family: Georgia, serif;
}

.cl-testimonial-quote p {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  max-width: none;
  margin: 0 0 var(--cl-space-lg);
}

.cl-testimonial-footer {
  border-top: 1px solid var(--cl-color-border);
  padding-top: var(--cl-space-md);
}

.cl-testimonial-person {
  margin-bottom: var(--cl-space-xs);
}

.cl-testimonial-name {
  font-size: var(--cl-text-sm);
  font-weight: var(--cl-fw-semibold);
  color: var(--cl-color-text);
  max-width: none;
  margin: 0 0 2px;
}

.cl-testimonial-role {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  font-style: normal;
  display: block;
}

.cl-testimonial-meta {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-primary);
  opacity: 0.7;
  max-width: none;
  margin: var(--cl-space-xs) 0 0;
}


/* ============================================================
   BLOG CARDS
   ============================================================ */

.cl-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-xl);
  text-decoration: none;
  transition:
    background var(--cl-transition-base) ease,
    border-color var(--cl-transition-base) ease,
    transform var(--cl-transition-base) var(--cl-ease-out);
}

.cl-blog-card:hover {
  background: var(--cl-color-surface-2);
  border-color: var(--cl-color-border-hover);
  transform: translateY(-3px);
}

.cl-blog-category {
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-ls-wider);
  text-transform: uppercase;
  color: var(--cl-color-primary);
  margin-bottom: var(--cl-space-sm);
  display: block;
}

.cl-blog-title {
  font-size: var(--cl-text-h4) !important;
  font-weight: var(--cl-fw-bold) !important;
  color: var(--cl-color-text) !important;
  line-height: var(--cl-lh-snug) !important;
  letter-spacing: var(--cl-ls-tight) !important;
  margin-bottom: var(--cl-space-sm) !important;
}

.cl-blog-excerpt {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  flex: 1;
  max-width: none;
  margin: 0 0 var(--cl-space-lg);
}

.cl-blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cl-color-border);
  padding-top: var(--cl-space-sm);
}

.cl-blog-meta {
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  max-width: none;
  margin: 0;
}

.cl-blog-arrow {
  color: var(--cl-color-text-muted);
  transition: transform var(--cl-transition-fast) ease, color var(--cl-transition-fast) ease;
}

.cl-blog-card:hover .cl-blog-arrow {
  transform: translateX(4px);
  color: var(--cl-color-primary);
}


/* ============================================================
   CTA SECTION
   ============================================================ */

.cl-cta-heading .elementor-heading-title {
  text-align: center !important;
  font-size: var(--cl-text-h2) !important;
}

.cl-cta-copy p {
  text-align: center;
  font-size: var(--cl-text-lg);
  color: var(--cl-color-text-muted);
  max-width: 58ch;
  margin: 0 auto var(--cl-space-xl);
}

.cl-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cl-space-sm);
  flex-wrap: wrap;
}

.cl-cta-meta {
  text-align: center;
  font-size: var(--cl-text-xs);
  color: var(--cl-color-text-subtle);
  margin-top: var(--cl-space-lg);
  max-width: none;
  margin: var(--cl-space-md) 0 0;
}

p.cl-cta-meta {
  text-align: center;
}


/* ============================================================
   SERVICE PAGE — HERO
   ============================================================ */

.cl-hero-label {
  margin-bottom: var(--cl-space-sm);
  display: block;
}

.cl-hero-title .elementor-heading-title {
  font-size: var(--cl-text-h1) !important;
  font-weight: var(--cl-fw-extrabold) !important;
  letter-spacing: var(--cl-ls-tighter) !important;
  line-height: var(--cl-lh-tight) !important;
}

.cl-hero-copy p {
  font-size: var(--cl-text-lg);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  max-width: 58ch;
}

.cl-hero-trust {
  margin-top: var(--cl-space-xl);
}


/* ============================================================
   SERVICE PAGE — FEATURE GRID
   ============================================================ */

.cl-feature-card {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-xl);
  transition: background var(--cl-transition-base) ease, border-color var(--cl-transition-base) ease;
}

.cl-feature-card:hover {
  background: var(--cl-color-surface-2);
  border-color: var(--cl-color-border-hover);
}

.cl-feature-num {
  font-family: var(--cl-font-mono);
  font-size: var(--cl-text-xs);
  font-weight: var(--cl-fw-bold);
  color: var(--cl-color-primary);
  letter-spacing: var(--cl-ls-wider);
  margin-bottom: var(--cl-space-md);
  display: block;
}

.cl-feature-title {
  font-size: var(--cl-text-h4) !important;
  font-weight: var(--cl-fw-bold) !important;
  color: var(--cl-color-text) !important;
  margin-bottom: var(--cl-space-xs) !important;
}

.cl-feature-copy {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  max-width: none;
  margin: 0;
}

/* Outcome / benefit items */
.cl-outcome-item {
  display: flex;
  align-items: flex-start;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-md) 0;
  border-bottom: 1px solid var(--cl-color-border-subtle);
}

.cl-outcome-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cl-color-primary);
  margin-top: 2px;
}

.cl-outcome-text {
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-base);
  max-width: none;
  margin: 0;
}

/* Comparison table */
.cl-comparison {
  background: var(--cl-color-surface-1);
  border: 1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  overflow: hidden;
}

.cl-comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--cl-color-border);
}

.cl-comparison-row:last-child { border-bottom: none; }

.cl-comparison-cell {
  padding: var(--cl-space-md) var(--cl-space-lg);
  font-size: var(--cl-text-sm);
  color: var(--cl-color-text-muted);
  border-right: 1px solid var(--cl-color-border);
}

.cl-comparison-cell:last-child { border-right: none; }

.cl-comparison-cell--header {
  font-weight: var(--cl-fw-semibold);
  color: var(--cl-color-text);
  background: var(--cl-color-surface-2);
}

.cl-comparison-cell--yes { color: var(--cl-color-success); }
.cl-comparison-cell--no { color: var(--cl-color-text-subtle); }


/* ============================================================
   ELEMENTOR OVERRIDES — Fix default Elementor heading styles
   ============================================================ */

/* Remove default Elementor margin from headings */
.elementor-widget-heading .elementor-heading-title {
  line-height: inherit;
  margin: 0;
}

/* Ensure p tags in HTML widgets match our text style */
.elementor-widget-html p {
  color: var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
}

/* Remove default Elementor button min-height */
.elementor-button {
  font-family: var(--cl-font-primary) !important;
}


/* ============================================================
   SCROLL REVEAL — default state (JS adds .is-visible)
   Already in variables.css but ensure override applies
   ============================================================ */

.cl-reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition:
    opacity 480ms cubic-bezier(0.00, 0.00, 0.20, 1.00),
    transform 480ms cubic-bezier(0.00, 0.00, 0.20, 1.00) !important;
}

.cl-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cl-reveal { opacity: 1 !important; transform: none !important; }
}

/* === /CLK: components-v1.0 === */

/* === CLK: components-v2.0 === */
/* ============================================================
   CLICKLIFY — COMPONENTS v2.0
   All component classes used across pages but missing from v1.
   ============================================================ */


/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.cl-text-display  { font-size: var(--cl-text-display); }
.cl-text-h2       { font-size: var(--cl-text-h2); }
.cl-text-lg       { font-size: var(--cl-text-lg); }
.cl-text-body-lg  { font-size: var(--cl-text-lg); line-height: var(--cl-lh-loose); }

.cl-color-text        { color: var(--cl-color-text); }
.cl-color-text-muted  { color: var(--cl-color-text-muted); }
.cl-color-text-subtle { color: var(--cl-color-text-subtle); }

.cl-fw-black     { font-weight: var(--cl-fw-black); }
.cl-fw-extrabold { font-weight: var(--cl-fw-extrabold); }

.cl-lh-snug    { line-height: var(--cl-lh-snug); }
.cl-lh-base    { line-height: var(--cl-lh-base); }
.cl-lh-relaxed { line-height: var(--cl-lh-relaxed); }

.cl-ls-tight   { letter-spacing: var(--cl-ls-tight); }
.cl-ls-tighter { letter-spacing: var(--cl-ls-tighter); }

.cl-font-primary { font-family: var(--cl-font-primary); }

.cl-safe-top     { padding-top: var(--cl-header-height); }
.cl-header-height { min-height: var(--cl-header-height); }

.cl-stagger > * { animation-delay: calc(var(--stagger-i, 0) * 80ms); }

/* ============================================================
   PAGE-LEVEL SECTION WRAPPERS (namespace only)
   ============================================================ */

.cl-search-hero,   .cl-search-problem,  .cl-search-philosophy,
.cl-search-systems,.cl-search-proof,    .cl-search-process,
.cl-search-cta,    .cl-search-faq,
.cl-ai-infra-hero, .cl-ai-infra-problem,.cl-ai-infra-philosophy,
.cl-ai-infra-systems,.cl-ai-infra-outcomes,.cl-ai-infra-proof,
.cl-ai-infra-process,.cl-ai-infra-shift,.cl-ai-infra-cta,
.cl-ai-infra-faq,
.cl-auto-hero,     .cl-auto-problem,    .cl-auto-philosophy,
.cl-auto-systems,  .cl-auto-outcomes,   .cl-auto-proof,
.cl-auto-process,  .cl-auto-shift,      .cl-auto-cta,
.cl-auto-faq,
.cl-content-hero,  .cl-content-problem, .cl-content-philosophy,
.cl-content-systems,.cl-content-outcomes,.cl-content-proof,
.cl-content-process,.cl-content-shift,  .cl-content-cta,
.cl-content-faq,
.cl-service-hero,  .cl-service-problem, .cl-service-philosophy,
.cl-service-cta,   .cl-service-faq,
.cl-services-hero, .cl-services-why,
.cl-services-grid-section,
.cl-build-process,
.cl-performance-layer, .cl-discoverability-layer,
.cl-ai-search-shift,
.cl-services,
.cl-services-inner, .cl-services-header,
.cl-services-cta,
.cl-ai-systems {
  display: block;
  width: 100%;
}


/* ============================================================
   PROBLEM CARDS
   ============================================================ */

.cl-problem-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:       var(--cl-space-xl);
  height:        100%;
  transition:    border-color var(--cl-transition-base), box-shadow var(--cl-transition-base);
}
.cl-problem-card:hover {
  border-color: var(--cl-color-border-hover);
  box-shadow:   var(--cl-shadow-medium);
}
.cl-problem-tag {
  display:        inline-block;
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wide);
  color:          var(--cl-color-primary);
  background:     var(--cl-color-primary-subtle);
  border-radius:  var(--cl-radius-pill);
  padding:        3px 10px;
  margin-bottom:  var(--cl-space-lg);
}
.cl-problem-title {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-md);
}
.cl-problem-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}


/* ============================================================
   PHILOSOPHY LIST
   ============================================================ */

.cl-philosophy-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--cl-space-2xl);
}
.cl-philosophy-item {
  border-left: 2px solid var(--cl-color-primary);
  padding-left: var(--cl-space-lg);
}
.cl-philosophy-title {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-xs);
}
.cl-philosophy-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}

/* Homepage philosophy block variant */
.cl-philosophy-block {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:       var(--cl-space-xl);
}


/* ============================================================
   SYSTEMS GRID CARDS
   ============================================================ */

.cl-systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cl-space-lg);
}

.cl-sys-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:       var(--cl-space-xl);
  transition:    border-color var(--cl-transition-base), box-shadow var(--cl-transition-base);
}
.cl-sys-card:hover {
  border-color: var(--cl-color-primary);
  box-shadow:   var(--cl-shadow-glow-sm);
}
.cl-sys-number {
  font-family:    var(--cl-font-mono);
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wider);
  color:          var(--cl-color-primary);
  margin:         0 0 var(--cl-space-md);
}
.cl-sys-title {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-sm);
}
.cl-sys-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}


/* ============================================================
   PERFORMANCE LIST
   ============================================================ */

.cl-perf-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--cl-space-md);
}
.cl-perf-item {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
  padding:       var(--cl-space-lg) var(--cl-space-xl);
  transition:    border-color var(--cl-transition-base);
}
.cl-perf-item:hover { border-color: var(--cl-color-border-hover); }

.cl-perf-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--cl-space-md);
  margin-bottom:   var(--cl-space-sm);
  flex-wrap:       wrap;
}
.cl-perf-title {
  font-size:   var(--cl-text-body);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  margin:      0;
}
.cl-perf-status {
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-medium);
  color:          var(--cl-color-primary);
  background:     var(--cl-color-primary-subtle);
  border-radius:  var(--cl-radius-pill);
  padding:        3px 12px;
  white-space:    nowrap;
}
.cl-perf-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}


/* ============================================================
   AI CARDS (search shift / generative engine panels)
   ============================================================ */

.cl-ai-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:       var(--cl-space-xl);
  height:        100%;
  transition:    border-color var(--cl-transition-base), box-shadow var(--cl-transition-base);
}
.cl-ai-card:hover {
  border-color: var(--cl-color-secondary);
  box-shadow:   var(--cl-shadow-glow-secondary);
}
.cl-ai-tag {
  display:        inline-block;
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wide);
  color:          var(--cl-color-secondary);
  background:     var(--cl-color-secondary-dim);
  border-radius:  var(--cl-radius-pill);
  padding:        3px 10px;
  margin-bottom:  var(--cl-space-lg);
}
.cl-ai-title {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-md);
}
.cl-ai-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}

/* AI page-level layout helpers */
.cl-ai-meta, .cl-ai-inner,
.cl-ai-visual, .cl-ai-layer, .cl-ai-layer-lbl,
.cl-ai-systems, .cl-ai-flow,
.cl-ai-diagram, .cl-ai-readiness,
.cl-ai-statuses, .cl-ai-status,
.cl-ai-nodes, .cl-ai-sc-hdr { display: block; }

.cl-ai-status-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
  padding:       var(--cl-space-lg);
}


/* ============================================================
   PROCESS STEPS (ordered list)
   ============================================================ */

.cl-process-steps {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            var(--cl-space-lg);
  counter-reset:  cl-step;
}
.cl-step {
  display:    flex;
  gap:        var(--cl-space-lg);
  background: var(--cl-surface-card);
  border:     1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:    var(--cl-space-xl);
  transition: border-color var(--cl-transition-base);
}
.cl-step:hover { border-color: var(--cl-color-border-hover); }

.cl-step-number {
  flex-shrink:    0;
  width:          48px;
  height:         48px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     var(--cl-color-primary-dim);
  border-radius:  var(--cl-radius-md);
  font-family:    var(--cl-font-mono);
  font-size:      var(--cl-text-sm);
  font-weight:    var(--cl-fw-bold);
  color:          var(--cl-color-primary);
  letter-spacing: 0.05em;
}
.cl-step-content { flex: 1; min-width: 0; }
.cl-step-title {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-sm);
}
.cl-step-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}

/* Older process aliases */
.cl-process-steps.cl-process { list-style: none; padding: 0; }
.cl-process-header,
.cl-process-inner,
.cl-process-grid { display: block; }
.cl-process-step { display: block; }
.cl-process-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}


/* ============================================================
   PROOF / CASE STUDY CARDS
   ============================================================ */

.cl-proof-card {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-lg);
  padding:       var(--cl-space-xl);
  height:        100%;
  transition:    border-color var(--cl-transition-base), box-shadow var(--cl-transition-base);
}
.cl-proof-card:hover {
  border-color: var(--cl-color-border-hover);
  box-shadow:   var(--cl-shadow-medium);
}
.cl-proof-type {
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wide);
  color:          var(--cl-color-primary);
  margin:         0 0 var(--cl-space-md);
}
.cl-proof-headline {
  font-size:   var(--cl-text-h4);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-lg);
}
.cl-proof-metrics {
  display:        flex;
  flex-direction: column;
  gap:            var(--cl-space-xs);
  border-top:     1px solid var(--cl-color-border);
  border-bottom:  1px solid var(--cl-color-border);
  padding:        var(--cl-space-lg) 0;
  margin:         0 0 var(--cl-space-lg);
}
.cl-metric-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--cl-space-md);
}
.cl-metric-label {
  font-size:  var(--cl-text-sm);
  color:      var(--cl-color-text-muted);
  flex:       1;
}
.cl-metric-value {
  font-size:   var(--cl-text-sm);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  text-align:  right;
  white-space: nowrap;
}
.cl-proof-brief {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}
.cl-proof-system {
  display:    inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--cl-text-label);
  font-weight: var(--cl-fw-medium);
  color:       var(--cl-color-text-subtle);
  margin-top:  var(--cl-space-lg);
}


/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.cl-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--cl-space-sm);
}
.cl-faq-item {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
  overflow:      hidden;
  transition:    border-color var(--cl-transition-base);
}
.cl-faq-item[open],
.cl-faq-item:hover { border-color: var(--cl-color-border-hover); }

.cl-faq-question {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--cl-space-lg);
  padding:     var(--cl-space-lg) var(--cl-space-xl);
  font-size:   var(--cl-text-body);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  cursor:      pointer;
  list-style:  none;
  line-height: var(--cl-lh-snug);
  transition:  color var(--cl-transition-base);
}
.cl-faq-question::-webkit-details-marker { display: none; }
.cl-faq-question::after {
  content:    '+';
  flex-shrink: 0;
  font-size:   1.25rem;
  color:       var(--cl-color-primary);
  transition:  transform var(--cl-transition-base);
  line-height: 1;
}
.cl-faq-item[open] .cl-faq-question::after {
  transform: rotate(45deg);
}
.cl-faq-item[open] .cl-faq-question {
  color: var(--cl-color-primary);
}
.cl-faq-answer {
  padding:     0 var(--cl-space-xl) var(--cl-space-lg);
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
}
.cl-faq-answer p { margin: 0 0 var(--cl-space-sm); }
.cl-faq-answer p:last-child { margin-bottom: 0; }


/* ============================================================
   HERO SECTION CLASSES
   ============================================================ */

.cl-hero {
  position:   relative;
  overflow:   hidden;
  padding-top: var(--cl-header-height);
}
.cl-hero-inner {
  max-width: var(--cl-container-xl);
  margin:    0 auto;
  padding:   var(--cl-space-7xl) var(--cl-space-4xl) var(--cl-space-6xl);
  display:   flex;
  align-items: center;
  gap:       var(--cl-space-4xl);
  position:  relative;
  z-index:   1;
}
.cl-hero-content { flex: 1; min-width: 0; }
.cl-hero-visual  { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }

.cl-hero-label {
  display:        inline-block;
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wider);
  color:          var(--cl-color-primary);
  background:     var(--cl-color-primary-subtle);
  border-radius:  var(--cl-radius-pill);
  padding:        4px 14px;
  margin-bottom:  var(--cl-space-lg);
}
.cl-hero-title {
  font-size:      var(--cl-text-h1);
  font-weight:    var(--cl-fw-black);
  color:          var(--cl-color-text);
  line-height:    var(--cl-lh-tight);
  letter-spacing: var(--cl-ls-tighter);
  margin:         0 0 var(--cl-space-lg);
}
.cl-hero-copy {
  font-size:   var(--cl-text-lg);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0 0 var(--cl-space-2xl);
  max-width:   56ch;
}
.cl-hero-actions {
  display:   flex;
  gap:       var(--cl-space-md);
  flex-wrap: wrap;
}
.cl-hero-cta  { display: flex; flex-direction: column; gap: var(--cl-space-lg); }
.cl-hero-trust {
  font-size:  var(--cl-text-sm);
  color:      var(--cl-color-text-subtle);
  margin-top: var(--cl-space-lg);
}
.cl-hero-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;
}
.cl-hero-fade-in  { animation: cl-fade-in  600ms var(--cl-ease-out) both; }
.cl-hero-fade-up  { animation: cl-fade-up  700ms var(--cl-ease-out) both; }

@keyframes cl-fade-in  { from { opacity: 0; }                        to { opacity: 1; } }
@keyframes cl-fade-up  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Hero dashboard widget */
.cl-hero-dash-wrap  { position: relative; }
.cl-hero-dashboard  {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-xl);
  padding:       var(--cl-space-lg);
  box-shadow:    var(--cl-shadow-large), var(--cl-shadow-glow);
  font-family:   var(--cl-font-mono);
  font-size:     var(--cl-text-xs);
  color:         var(--cl-color-text-muted);
}
.cl-hero__visual-float {
  animation: cl-float 4s ease-in-out infinite;
}
@keyframes cl-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}


/* ============================================================
   DASHBOARD WIDGET (hero visual / cl-dash-*)
   ============================================================ */

.cl-dash-main    { display: flex; flex-direction: column; gap: 12px; }
.cl-dash-hdr     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cl-dash-hdr-title { font-size: var(--cl-text-label); font-weight: var(--cl-fw-semibold); color: var(--cl-color-text); }
.cl-dash-hdr-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--cl-text-label); color: var(--cl-color-success);
}
.cl-dash-hdr-live::before {
  content: ''; display: block; width: 6px; height: 6px;
  background: var(--cl-color-success); border-radius: 50%;
  animation: cl-dash-pulse 1.5s ease-in-out infinite;
}
@keyframes cl-dash-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.cl-dash-metrics { display: flex; gap: 12px; flex-wrap: wrap; }
.cl-dash-metric  { flex: 1; min-width: 80px; background: var(--cl-color-surface-0); border-radius: var(--cl-radius-sm); padding: 8px; }
.cl-dash-mv      { font-size: 1.25rem; font-weight: var(--cl-fw-bold); color: var(--cl-color-text); display: block; }
.cl-dash-ml      { font-size: var(--cl-text-label); color: var(--cl-color-text-subtle); display: block; margin-top: 2px; }
.cl-dash-md      { font-size: var(--cl-text-label); color: var(--cl-color-success); display: block; }

.cl-dash-chart   { background: var(--cl-color-surface-0); border-radius: var(--cl-radius-sm); padding: 10px; }
.cl-dash-ch      { font-size: var(--cl-text-label); color: var(--cl-color-text-subtle); margin-bottom: 6px; }
.cl-dash-bars    { display: flex; gap: 4px; align-items: flex-end; height: 48px; }
.cl-dash-bar     {
  flex: 1; background: var(--cl-color-primary-subtle);
  border-radius: 2px 2px 0 0;
  min-height: 8px;
  transition: background var(--cl-transition-base);
}
.cl-dash-bar--hi { background: var(--cl-color-primary); }

.cl-dash-pipeline { display: flex; flex-direction: column; gap: 6px; }
.cl-dash-pipe    { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--cl-color-surface-0); border-radius: var(--cl-radius-sm); }
.cl-dash-pname   { font-size: var(--cl-text-label); color: var(--cl-color-text-muted); flex: 1; }
.cl-dash-pstatus {
  font-size: var(--cl-text-label); color: var(--cl-color-text-subtle);
  background: var(--cl-color-surface-1); border-radius: var(--cl-radius-pill);
  padding: 1px 8px;
}
.cl-dash-pstatus--v { color: var(--cl-color-success); }

.cl-dash-pdot    { width: 6px; height: 6px; border-radius: 50%; background: var(--cl-color-text-subtle); flex-shrink: 0; }
.cl-dash-pdot--g { background: var(--cl-color-success); }
.cl-dash-pdot--v { background: var(--cl-color-primary); }

.cl-dash-float {
  position:  absolute;
  background: var(--cl-surface-card);
  border:    1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-md);
  padding:   var(--cl-space-sm) var(--cl-space-lg);
  font-size: var(--cl-text-label);
  color:     var(--cl-color-text-muted);
  box-shadow: var(--cl-shadow-soft);
  animation: cl-float 3.5s ease-in-out infinite;
}
.cl-dash-cl, .cl-dash-cv, .cl-dash-fc,
.cl-dash-fi, .cl-dash-fl, .cl-dash-fv,
.cl-dash-ml, .cl-dash-md { display: block; }

.cl-d-pulse, .cl-sd-pulse {
  display:  inline-block; width: 7px; height: 7px;
  border-radius: 50%; vertical-align: middle;
  animation: cl-dash-pulse 1.5s ease-in-out infinite;
}
.cl-d-pulse  { background: var(--cl-color-success); }
.cl-sd-pulse { background: var(--cl-color-secondary); }

/* AI diagram nodes */
.cl-ai-nodes  { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-ai-nd     {
  background: var(--cl-color-primary-dim); border: 1px solid var(--cl-color-primary);
  border-radius: var(--cl-radius-sm); padding: 4px 10px;
  font-size: var(--cl-text-label); color: var(--cl-color-primary);
}
.cl-ai-nd--out { border-color: var(--cl-color-secondary); color: var(--cl-color-secondary); background: var(--cl-color-secondary-dim); }
.cl-ai-nd--sys { border-color: var(--cl-color-border-strong); color: var(--cl-color-text-muted); background: transparent; }
.cl-ai-nd-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cl-color-primary); display: inline-block;
  animation: cl-dash-pulse 1.2s ease-in-out infinite;
}
.cl-ai-bridge     { display: flex; align-items: center; gap: 0; }
.cl-ai-bridge-line { flex: 1; height: 1px; background: var(--cl-color-border); }
.cl-ai-bridge-dot  { width: 4px; height: 4px; border-radius: 50%; background: var(--cl-color-primary); flex-shrink: 0; }
.cl-ai-sdot   { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; }
.cl-ai-sdot--b { background: var(--cl-color-primary); }
.cl-ai-sdot--c { background: var(--cl-color-secondary); }
.cl-ai-sdot--g { background: var(--cl-color-success); }


/* ============================================================
   STATS SECTION
   ============================================================ */

.cl-stats        { display: block; }
.cl-stats-inner  { max-width: var(--cl-container-xl); margin: 0 auto; padding: 0 var(--cl-space-4xl); }
.cl-stats-eyebrow {
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wider);
  color:          var(--cl-color-primary);
  margin-bottom:  var(--cl-space-lg);
}
.cl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:    var(--cl-space-xl);
}
.cl-stat-meta {
  font-size:   var(--cl-text-xs);
  color:       var(--cl-color-text-subtle);
  margin-top:  var(--cl-space-xs);
}
.cl-stat-item--anchor { cursor: default; }
.cl-stat-value--anchor { color: var(--cl-color-primary); }


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.cl-testimonials         { display: block; }
.cl-testimonials-inner   {
  max-width: var(--cl-container-xl);
  margin:    0 auto;
  padding:   0 var(--cl-space-4xl);
}
.cl-testimonials-header  { margin-bottom: var(--cl-space-3xl); }
.cl-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:    var(--cl-space-lg);
}
.cl-testimonial-meta {
  display:     flex;
  align-items: center;
  gap:         var(--cl-space-md);
  margin-top:  var(--cl-space-lg);
}
.cl-testimonial-person { display: flex; flex-direction: column; }
.cl-testimonial-name {
  font-size:   var(--cl-text-sm);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  margin:      0;
}
.cl-testimonial-role {
  font-size: var(--cl-text-xs);
  color:     var(--cl-color-text-subtle);
  margin:    0;
}


/* ============================================================
   AUTHORITY SECTION
   ============================================================ */

.cl-authority        { display: block; }
.cl-authority-inner  {
  max-width:  var(--cl-container-xl);
  margin:     0 auto;
  padding:    0 var(--cl-space-4xl);
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        var(--cl-space-3xl);
  align-items: start;
}
.cl-authority-label {
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cl-ls-wider);
  color:          var(--cl-color-primary);
  margin-bottom:  var(--cl-space-lg);
  display:        block;
}
.cl-authority-lead {
  font-size:   var(--cl-text-h3);
  font-weight: var(--cl-fw-bold);
  color:       var(--cl-color-text);
  line-height: var(--cl-lh-snug);
  margin:      0 0 var(--cl-space-lg);
}
.cl-authority-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}
.cl-authority-surface {
  background:    var(--cl-surface-card);
  border:        1px solid var(--cl-color-border);
  border-radius: var(--cl-radius-xl);
  padding:       var(--cl-space-xl);
}
.cl-authority-attrs  { display: flex; flex-direction: column; gap: var(--cl-space-lg); }
.cl-authority-stats  { display: flex; gap: var(--cl-space-2xl); flex-wrap: wrap; margin-top: var(--cl-space-2xl); }
.cl-authority-evolution { margin-top: var(--cl-space-2xl); }
.cl-authority-philosophy { margin-top: var(--cl-space-2xl); }

.cl-attr-block {
  display:      flex;
  gap:          var(--cl-space-lg);
  align-items:  flex-start;
  padding:      var(--cl-space-lg);
  border-bottom: 1px solid var(--cl-color-border-subtle);
}
.cl-attr-block--last { border-bottom: none; }
.cl-attr-head { flex-shrink: 0; }
.cl-attr-title {
  font-size:   var(--cl-text-sm);
  font-weight: var(--cl-fw-semibold);
  color:       var(--cl-color-text);
  margin:      0 0 4px;
}
.cl-attr-copy {
  font-size:   var(--cl-text-xs);
  color:       var(--cl-color-text-muted);
  line-height: var(--cl-lh-loose);
  margin:      0;
}

/* Evolution strip */
.cl-evo-strip {
  display:   flex;
  gap:       var(--cl-space-sm);
  align-items: center;
  flex-wrap: wrap;
}
.cl-evo-item {
  display:   flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:       4px;
}
.cl-evo-year {
  font-family:    var(--cl-font-mono);
  font-size:      var(--cl-text-label);
  font-weight:    var(--cl-fw-semibold);
  color:          var(--cl-color-primary);
}
.cl-evo-label {
  font-size:   var(--cl-text-xs);
  color:       var(--cl-color-text-subtle);
  max-width:   80px;
  line-height: 1.3;
}
.cl-evo-arrow {
  color:      var(--cl-color-border-strong);
  font-size:  var(--cl-text-sm);
  flex-shrink: 0;
}


/* ============================================================
   SERVICES OVERVIEW PAGE
   ============================================================ */

.cl-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cl-space-lg);
}


/* ============================================================
   BLOG SECTION WRAPPERS
   ============================================================ */

.cl-blog       { display: block; }
.cl-blog-inner { max-width: var(--cl-container-xl); margin: 0 auto; padding: 0 var(--cl-space-4xl); }
.cl-blog-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  gap:             var(--cl-space-xl);
  margin-bottom:   var(--cl-space-3xl);
  flex-wrap:       wrap;
}
.cl-blog-header-copy {
  font-size:   var(--cl-text-sm);
  color:       var(--cl-color-text-muted);
  max-width:   48ch;
  line-height: var(--cl-lh-loose);
  margin:      0;
}
.cl-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cl-space-lg);
}
.cl-blog-footer {
  display:         flex;
  justify-content: center;
  margin-top:      var(--cl-space-3xl);
}
.cl-blog-meta {
  display:   flex;
  gap:       var(--cl-space-md);
  flex-wrap: wrap;
  font-size: var(--cl-text-xs);
  color:     var(--cl-color-text-subtle);
}


/* ============================================================
   CTA SECTION
   ============================================================ */

.cl-cta-inner {
  max-width:  var(--cl-container-md);
  margin:     0 auto;
  text-align: center;
}
.cl-cta-primary {
  display:       block;
  background:    linear-gradient(135deg, var(--cl-color-primary) 0%, var(--cl-color-primary-active) 100%);
  padding:       var(--cl-space-3xl) var(--cl-space-2xl);
  border-radius: var(--cl-radius-2xl);
  box-shadow:    var(--cl-shadow-glow);
}


/* ============================================================
   SERVICES SECTION (homepage)
   ============================================================ */

.cl-services-header {
  max-width:    640px;
  margin-bottom: var(--cl-space-3xl);
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 1023px) {
  .cl-hero-inner { padding: var(--cl-space-5xl) var(--cl-space-xl) var(--cl-space-4xl); }
  .cl-authority-inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .cl-hero-inner {
    flex-direction: column;
    padding:        var(--cl-space-4xl) var(--cl-space-md) var(--cl-space-3xl);
  }
  .cl-hero-visual { display: none; }

  .cl-step { flex-direction: column; }
  .cl-step-number { width: 40px; height: 40px; }

  .cl-dash-metrics { gap: 8px; }

  .cl-blog-inner,
  .cl-stats-inner,
  .cl-testimonials-inner,
  .cl-authority-inner { padding: 0 var(--cl-space-md); }

  .cl-proof-metrics { gap: var(--cl-space-xs); }
  .cl-evo-strip { gap: 4px; }
}

/* === /CLK: components-v2.0 === */