/*
 * Luminary Design Layer | Techviochats
 * Based on TemplateMo 621 Luminary (exact values)
 * Controls: font, color tokens, grid bg, spotlight, scroll-reveal
 */

/* ── 1. DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Easing | silk-ease from Luminary */
  --lm-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  /* Scroll reveal */
  --lm-reveal-y:    36px;
  --lm-reveal-dur:  1.2s;

  /* Grid */
  --lm-grid-size:   120px;
  --lm-spot-r:      500px;

  /* Dark-mode text (Luminary exact) */
  --txt-1:          #E5E7EB;   /* --ivory */
  --txt-2:          #9CA3AF;   /* --slate-light */
  --txt-3:          #6B7280;   /* --slate-warm */

  /* Grid line | dark mode */
  --lm-line:        rgba(156, 163, 175, 0.18);
}

/* Light mode text & grid line override */
html:not(.dark) {
  --txt-1:    #0a0a0a;
  --txt-2:    #374151;
  --txt-3:    #6b7280;
  --lm-line:  rgba(0, 0, 0, 0.09);
}

/* ── 2. FONT | Montserrat site-wide ──────────────── */
body,
input, textarea, select, button {
  font-family: 'Montserrat', 'DM Sans', system-ui, sans-serif;
}

/* Heading rhythm (keep existing sizes, only adjust weight/tracking) */
h1, h2, h3, h4, h5, h6,
.tc-h2, .tc-h3 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
h1 { letter-spacing: -0.05em; line-height: 1; }

/* Strong inside headings = semibold, like Luminary <em>/<strong> */
h1 strong, h2 strong, h3 strong,
.tc-h2 strong, .tc-h3 strong { font-weight: 600; }

/* Body / paragraph */
p, li, td, th,
.tc-lead, .tc-body {
  font-weight: 300;
  line-height: 1.8;
}

/* Nav links */
.tc-nav-links a {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 10px;
}

/* Eyebrow / section labels */
.tc-label {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.3em;
}

/* Buttons */
.tc-btn, .tc-btn-primary, .tc-btn-outline, .tc-btn-sm,
button, [type="submit"] {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* ── 3. SITE GRID BACKGROUND + SPOTLIGHT ─────────── */
.site-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* spotlight position | starts off-screen */
  --mx: -600px;
  --my: -600px;
  background-image:
    linear-gradient(to right,  var(--lm-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lm-line) 1px, transparent 1px);
  background-size: var(--lm-grid-size) var(--lm-grid-size);
  /* mask | grid only shows inside the spotlight circle */
  -webkit-mask-image: radial-gradient(
    circle var(--lm-spot-r) at var(--mx) var(--my),
    black 0%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--lm-spot-r) at var(--mx) var(--my),
    black 0%,
    transparent 70%
  );
}

/* Disable on touch devices | no mouse to follow */
@media (hover: none) {
  .site-grid-bg { display: none; }
}

/* ── 4. SCROLL REVEAL ─────────────────────────────── */
.scroll-animate {
  opacity: 0;
  transform: translateY(var(--lm-reveal-y));
  transition:
    opacity  var(--lm-reveal-dur) var(--lm-ease),
    transform var(--lm-reveal-dur) var(--lm-ease);
  will-change: opacity, transform;
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Auto-stagger for grid children (nth-child 1 has no delay | natural) */
.scroll-animate:nth-child(2) { transition-delay: 0.10s; }
.scroll-animate:nth-child(3) { transition-delay: 0.20s; }
.scroll-animate:nth-child(4) { transition-delay: 0.30s; }
.scroll-animate:nth-child(5) { transition-delay: 0.40s; }
.scroll-animate:nth-child(6) { transition-delay: 0.50s; }
.scroll-animate:nth-child(7) { transition-delay: 0.60s; }
.scroll-animate:nth-child(8) { transition-delay: 0.70s; }

/* Explicit delay helpers (add to siblings inside a grid) */
.reveal-d1 { transition-delay: 0.10s !important; }
.reveal-d2 { transition-delay: 0.20s !important; }
.reveal-d3 { transition-delay: 0.30s !important; }
.reveal-d4 { transition-delay: 0.40s !important; }

/* Section headers always reveal without delay */
.tc-section-hdr.scroll-animate { transition-delay: 0s; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 5. SILVER PALETTE | replace every blue text accent ── */
/*
 * Luminary uses no blue for text at all.
 * --silver  = #B0B8C4   (Luminary --silver)
 * --ivory   = #E5E7EB   (already --txt-1)
 * --slate-l = #9CA3AF   (already --txt-2)
 * --slate-w = #6B7280   (already --txt-3)
 * Silver gradient: linear-gradient(135deg, #E5E7EB, #B0B8C4, #9CA3AF)
 */
:root {
  --silver:       #B0B8C4;
  --silver-grad:  linear-gradient(135deg, #E5E7EB 0%, #B0B8C4 50%, #9CA3AF 100%);
}

/* Eyebrow / section label | muted gray pill, not blue */
.tc-label {
  background: rgba(176, 184, 196, 0.08) !important;
  border-color: rgba(176, 184, 196, 0.18) !important;
  color: var(--txt-3) !important;
}
html:not(.dark) .tc-label {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--txt-3) !important;
}

/* Heading gradient em/strong | silver, not blue */
.tc-h2 em, .tc-h1 em,
.tc-h2 strong, .tc-h1 strong {
  background: var(--silver-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 600;
}
/* Light mode: near-black heading em */
html:not(.dark) .tc-h2 em,
html:not(.dark) .tc-h1 em,
html:not(.dark) .tc-h2 strong,
html:not(.dark) .tc-h1 strong {
  background: linear-gradient(135deg, #0a0a0a 0%, #374151 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Stat numbers | silver gradient, not blue */
.tc-stat-num {
  background: linear-gradient(135deg, #E5E7EB 0%, #B0B8C4 50%, #9CA3AF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html:not(.dark) .tc-stat-num {
  background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Service/card titles that were blue */
.tc-service-title,
.tc-project-title,
.tc-blog-title,
.tc-case-title { color: var(--txt-1) !important; }
.tc-service-title:hover,
.tc-project-title:hover,
.tc-blog-title:hover { color: var(--silver) !important; }
html:not(.dark) .tc-service-title:hover,
html:not(.dark) .tc-project-title:hover,
html:not(.dark) .tc-blog-title:hover { color: #374151 !important; }

/* Process/step numbers */
.tc-process-num { color: rgba(176,184,196,0.15) !important; }

/* Btn-ghost arrow / outline text */
.tc-btn-outline,
.tc-btn-ghost { color: var(--txt-2) !important; }
.tc-btn-outline:hover,
.tc-btn-ghost:hover { color: var(--txt-1) !important; }
html:not(.dark) .tc-btn-outline { color: #374151 !important; border-color: rgba(0,0,0,0.2) !important; }
html:not(.dark) .tc-btn-outline:hover { color: #0a0a0a !important; }

/* Testimonial stars | silver tone */
.tc-testi-stars,
.tc-testi-mstars { color: var(--silver) !important; }
html:not(.dark) .tc-testi-stars,
html:not(.dark) .tc-testi-mstars { color: #9CA3AF !important; }

/* Footer social hover | silver */
.tc-footer-social a:hover {
  color: var(--silver) !important;
  border-color: rgba(176,184,196,0.3) !important;
  background: rgba(176,184,196,0.06) !important;
}

/* Nav link color chain */
.tc-nav-links a          { color: var(--txt-3); }
.tc-nav-links a:hover,
.tc-nav-links a.tc-active { color: var(--txt-1); }
.tc-mob-menu a           { color: var(--txt-2); }
.tc-mob-menu a:hover     { color: var(--txt-1); }
.tc-footer-col ul li a   { color: var(--txt-2); }
.tc-footer-col ul li a:hover { color: var(--txt-1); }

/* Scrolled header bg needs silver border */
.tc-header.scrolled { box-shadow: 0 1px 0 rgba(176,184,196,0.08) !important; }

/* Make sure body color uses variable */
body { color: var(--txt-1); }

/* ── 6. REMAINING BLUE TEXT OVERRIDES ─────────────── */
/* Every remaining var(--pri-light) used as text color → silver */
.tc-btn-outline        { color: var(--txt-2) !important; border-color: rgba(176,184,196,.22) !important; }
.tc-btn-outline:hover  { color: var(--txt-1) !important; border-color: rgba(176,184,196,.45) !important; }
.tc-btn-ghost          { color: var(--txt-2) !important; }
.tc-btn-ghost:hover    { color: var(--txt-1) !important; }
.tc-project-link       { color: #B0B8C4 !important; }
.tc-project-link:hover { color: #E5E7EB !important; }
.tc-blog-title:hover   { color: #B0B8C4 !important; }

/* Icon wrapper backgrounds | silver tint instead of blue tint */
[style*="rgba(37,99,235,.12)"],
[style*="rgba(37,99,235,0.12)"] {
  background: rgba(176,184,196,.08) !important;
}

/* Service icon box | class-based blue bg */
.tc-service-icon {
  background: rgba(176,184,196,.08) !important;
}

/* Filter buttons active/hover | silver instead of blue bg */
.tc-filter-btn:hover,
.tc-filter-btn.active {
  background: rgba(176,184,196,.12) !important;
  border-color: rgba(176,184,196,.35) !important;
  color: var(--txt-1) !important;
}

/* Process step hover glow | silver instead of blue */
.tc-process-step:hover .tc-process-num {
  box-shadow: 0 0 20px rgba(176,184,196,.18) !important;
}

/* Footer social hover | silver */
.tc-footer-social a:hover {
  color: #B0B8C4 !important;
  border-color: rgba(176,184,196,.3) !important;
  background: rgba(176,184,196,.06) !important;
}

/* Outline button hover | silver border & text */
.tc-btn-outline:hover {
  border-color: rgba(176,184,196,.45) !important;
  color: var(--txt-1) !important;
}

/* Focus outline | silver instead of blue */
.tc-filter-btn:focus-visible,
.tc-input:focus,
.tc-select:focus,
.tc-textarea:focus {
  outline-color: rgba(176,184,196,.5) !important;
  border-color: rgba(176,184,196,.5) !important;
  box-shadow: 0 0 0 3px rgba(176,184,196,.12) !important;
}

/* ── 7. OVERRIDE AGENCY.CSS BLUE TOKENS → SILVER ────── */
/* Redefine the blue design tokens so every var(--pri*) usage goes silver */
:root {
  --pri:        #B0B8C4;
  --pri-light:  #D1D5DB;
  --pri-dark:   #9CA3AF;
  --pri-glow:   rgba(176,184,196,0.22);
  --grad:       linear-gradient(135deg, #C9CDD4 0%, #8A9199 100%);
  --grad-text:  linear-gradient(135deg, #E5E7EB 0%, #B0B8C4 100%);
  --border-hi:  rgba(176,184,196,0.35);
  --sh-btn:     0 4px 18px rgba(176,184,196,0.22);
}

/* Primary button | silver background needs dark text for contrast */
.tc-btn-primary {
  background: linear-gradient(135deg, #C9CDD4 0%, #9CA3AF 100%) !important;
  color: #0f172a !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(176,184,196,0.22) !important;
}
.tc-btn-primary:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 8px 28px rgba(176,184,196,0.38) !important;
  color: #0f172a !important;
}

/* Ghost button | silver text instead of blue */
.tc-btn-ghost,
.tc-btn-ghost:hover { color: var(--txt-2) !important; }

/* Service icon default bg | silver tint (hover already silver in agency.css) */
.tc-service-icon { background: rgba(176,184,196,0.10) !important; }

/* Page hero glow | silver instead of blue */
.tc-page-hero {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(176,184,196,0.08) 0%, transparent 60%) !important;
}

/* CTA banner spotlight | silver */
.tc-cta-banner::before {
  background: radial-gradient(ellipse, rgba(176,184,196,0.08) 0%, transparent 65%) !important;
}

/* Hardcoded blue glow on card hover */
.tc-card:hover { box-shadow: 0 8px 32px rgba(176,184,196,0.10) !important; }

/* Footer social hover | remove the hardcoded blue bg */
.tc-footer-social a:hover {
  background: rgba(176,184,196,0.06) !important;
  border-color: rgba(176,184,196,0.30) !important;
  color: var(--silver) !important;
}

/* Light-mode: keep --border-hi consistent */
html:not(.dark) { --border-hi: rgba(176,184,196,0.35); }

/* ── 8. FLOATING PILL HEADER ─────────────────────────── */
.tc-header {
  top: 14px !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important; max-width: 1220px !important;
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-radius: 100px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}
html.dark .tc-header {
  background: rgba(10,16,32,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
}
.tc-header.scrolled {
  background: rgba(255,255,255,0.72) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.10) !important;
  border-color: rgba(255,255,255,0.65) !important;
}
html.dark .tc-header.scrolled {
  background: rgba(10,16,32,0.75) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.45) !important;
}
.tc-nav { height: 62px !important; }
.tc-header .tc-wrap { padding-inline: clamp(14px,2.5vw,28px) !important; }

/* WhatsApp CTA button */
.tc-btn-whatsapp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; background: #25D366; color: #fff !important;
  border-radius: 100px; font-size: .8125rem; font-weight: 600;
  letter-spacing: .03em; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.tc-btn-whatsapp:hover {
  background: #1abe58; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37,211,102,.35); color: #fff !important;
}
.tc-btn-whatsapp i { font-size: .875rem; }

/* Nav link contrast on white pill */
html:not(.dark) .tc-nav-links a { color: #4B5563 !important; }
html:not(.dark) .tc-nav-links a:hover,
html:not(.dark) .tc-nav-links a.tc-active { color: #0a0a0a !important; font-weight: 600 !important; }

/* Mobile | smaller pill */
@media (max-width: 1023px) {
  .tc-header { width: calc(100% - 24px) !important; border-radius: 18px !important; top: 10px !important; }
  .tc-mob-menu {
    top: 84px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important; max-width: 1220px !important;
    border-radius: 0 0 18px 18px !important;
  }
}