/* ═══════════════════════════════════════════════════
   TINLANCE — Design System
   Aesthetic: Dark terminal / industrial precision
   Fonts: Syne (display) + DM Mono (body/UI)
═══════════════════════════════════════════════════ */

:root {
  --bg:        #080a0f;
  --bg2:       #0d1117;
  --bg3:       #111827;
  --border:    #1e2530;
  --border2:   #2d3748;
  --accent:    #00e5c8;
  --accent-d:  #00b8a2;
  --red:       #ff4d6d;
  --yellow:    #f5c842;
  --text:      #e8ecf4;
  --muted:     #6b7793;
  --muted2:    #4a5568;
  --glow:      rgba(0,229,200,0.12);
  --radius:    3px;
  --font-mono: 'DM Mono', monospace;
  --font-head: 'Syne', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom cursor (from original design) */
.cursor {
  position:fixed; width:12px; height:12px; background:var(--accent);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,opacity .2s;
  mix-blend-mode:screen;
}
.cursor-trail {
  position:fixed; width:36px; height:36px;
  border:1px solid var(--accent); border-radius:50%;
  pointer-events:none; z-index:9997;
  transform:translate(-50%,-50%);
  transition:left .12s ease,top .12s ease;
  opacity:.35;
}

/* Cookie consent */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:#0d1117; border-top:1px solid var(--border);
  padding:1rem 2rem; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.cookie-banner p { font-size:.78rem; color:var(--muted); margin:0; font-weight:500; }
.cookie-banner a { color:var(--accent); }
.cookie-banner-actions { display:flex; gap:.6rem; flex-shrink:0; }

/* Accessibility: focus-visible */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* Print styles */
@media print {
  .navbar, .site-footer, .cookie-banner, #backToTop, #scrollProgress, .cursor, .cursor-trail { display: none !important; }
  body { background: white; color: black; }
  a { color: black; }
  .hero { min-height: auto; padding: 2rem 0; }
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), #00b8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stagger animation utility */
.stagger > * { opacity: 0; transform: translateY(20px); }
.stagger.visible > * { animation: fadeUp .5s ease forwards; }
.stagger.visible > *:nth-child(1) { animation-delay: 0s; }
.stagger.visible > *:nth-child(2) { animation-delay: .1s; }
.stagger.visible > *:nth-child(3) { animation-delay: .2s; }
.stagger.visible > *:nth-child(4) { animation-delay: .3s; }
.stagger.visible > *:nth-child(5) { animation-delay: .4s; }
.stagger.visible > *:nth-child(6) { animation-delay: .5s; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--border2) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 3px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Page transition */
.page-fade { animation: pageFadeIn .3s ease; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Glassmorphism nav */
.navbar.glass {
  background: rgba(8,10,15,.75) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* Gradient headline */
.headline-accent { color: var(--accent); }

/* Magnetic button */
.btn-magnetic { transition: transform .3s cubic-bezier(.25,.46,.45,.94); }

/* Cyber dots background */
.cyber-dots {
  background-image: radial-gradient(circle, var(--border2) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Grain */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:9999;
  opacity:.5;
}

/* Container */
.container { max-width:1160px; margin:0 auto; padding:0 2.5rem; }
@media(max-width:768px){ .container{ padding:0 1.25rem; } }

/* ── TYPOGRAPHY ────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:800; line-height:1.05; letter-spacing:-.02em; }
p { line-height:1.75; }
a { color:inherit; }

/* ── BUTTONS ───────────────────────────────────── */
.btn-primary {
  display:inline-block;
  background:var(--accent);
  color:var(--bg);
  padding:.85rem 2rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,229,200,.3); }
.btn-primary.btn-lg { padding:1rem 2.5rem; font-size:.85rem; }

.btn-ghost {
  display:inline-block;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border2);
  padding:.85rem 2rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.btn-ghost:hover { color:var(--text); border-color:var(--text); }

.btn-ghost-sm {
  display:inline-block;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  padding:.55rem 1.2rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .2s,border-color .2s;
}
.btn-ghost-sm:hover { color:var(--text); border-color:var(--muted); }

.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:.65rem 1.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.btn-outline:hover { background:var(--accent); color:var(--bg); }

.btn-accent {
  display:inline-block;
  background:var(--accent);
  color:var(--bg);
  padding:.75rem 1.8rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,229,200,.25); }

/* ── FLASH MESSAGES ────────────────────────────── */
.flash { padding:.8rem 1.5rem; font-size:.82rem; font-weight:500; border-left:3px solid; }
.flash-success { background:rgba(0,229,200,.08); border-color:var(--accent); color:var(--accent); }
.flash-error   { background:rgba(255,77,109,.08); border-color:var(--red); color:var(--red); }

/* ── NAVBAR ────────────────────────────────────── */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 2.5rem;
  background:rgba(8,10,15,.88);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:padding .3s;
}
.navbar.scrolled { padding:.9rem 2.5rem; }

.nav-logo {
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--text);
}
.nav-logo span { color:var(--accent); }

.nav-links {
  display:flex;
  align-items:center;
  gap:2.5rem;
  list-style:none;
}
.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .2s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-3px; left:0;
  width:0; height:1px;
  background:var(--accent);
  transition:width .25s;
}
.nav-links a:hover,
.nav-links a.nav-active { color:var(--text); }
.nav-links a:hover::after,
.nav-links a.nav-active::after { width:100%; }

.nav-cta {
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:.5rem 1.3rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.nav-cta:hover { background:var(--accent); color:var(--bg); }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); margin:5px 0; transition:transform .3s,opacity .3s; }

.mobile-nav {
  display:none;
  position:fixed;
  inset:0;
  top:65px;
  background:var(--bg);
  z-index:99;
  padding:2rem 1.5rem;
  flex-direction:column;
  gap:1.5rem;
  border-top:1px solid var(--border);
}
.mobile-nav a {
  color:var(--text);
  text-decoration:none;
  font-size:1.2rem;
  font-family:var(--font-head);
  font-weight:700;
  border-bottom:1px solid var(--border);
  padding-bottom:1rem;
}

/* ── SECTION COMMON ────────────────────────────── */
section { padding:6rem 0; }
.section-eyebrow {
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.8rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.section-title {
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;
  line-height:1.08;
  margin-bottom:3rem;
}
.section-head { margin-bottom:4rem; }
.section-head-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:3rem;
  flex-wrap:wrap;
  gap:1rem;
}

/* ── HERO ──────────────────────────────────────── */
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8rem 0 5rem;
  position:relative;
  overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 80%);
  opacity:.35;
}
.orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.orb-1 {
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(0,229,200,.1) 0%,transparent 65%);
  top:50%; left:55%;
  transform:translate(-50%,-50%);
  animation:orbPulse 7s ease-in-out infinite;
}
.orb-2 {
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(255,77,109,.07) 0%,transparent 70%);
  top:20%; left:15%;
  animation:orbPulse 10s 2s ease-in-out infinite;
}
.scan-line {
  position:absolute;
  left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.15;
  animation:scanDown 8s linear infinite;
}
@keyframes orbPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.7; }
  50%      { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
}
@keyframes scanDown {
  from { top:-2px; }
  to   { top:100vh; }
}
.hero-inner { position:relative; z-index:2; }

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:2rem;
  padding:.35rem .9rem;
  border:1px solid rgba(0,229,200,.25);
  background:rgba(0,229,200,.06);
  animation:fadeUp .5s .1s ease both;
}
.badge-dot {
  width:6px; height:6px;
  background:var(--accent);
  border-radius:50%;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,229,200,.4); }
  50%      { opacity:.7; box-shadow:0 0 0 4px rgba(0,229,200,0); }
}

.hero-title {
  font-size:clamp(3.5rem,8vw,7.5rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.03em;
  margin-bottom:0;
  animation:fadeUp .6s .25s ease both;
}
.title-accent { color:var(--accent); }
.title-outline {
  -webkit-text-stroke:2px var(--text);
  color:transparent;
}

.hero-sub {
  max-width:480px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.85;
  margin-top:2rem;
  animation:fadeUp .6s .4s ease both;
}

.hero-cta {
  display:flex;
  gap:1rem;
  margin-top:2.5rem;
  flex-wrap:wrap;
  animation:fadeUp .6s .55s ease both;
}

.hero-metrics {
  display:flex;
  gap:3rem;
  margin-top:4rem;
  padding-top:2.5rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
  animation:fadeUp .6s .7s ease both;
}
.metric-val {
  display:block;
  font-family:var(--font-head);
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  line-height:1;
}
.metric-label {
  display:block;
  font-size:.65rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:.3rem;
}

.hero-scroll-hint {
  position:absolute;
  bottom:2.5rem;
  left:2.5rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted2);
  animation:fadeUp .5s 1s ease both;
}
.scroll-line {
  width:32px; height:1px;
  background:var(--muted2);
}

/* ── TICKER ────────────────────────────────────── */
.ticker-wrap {
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.85rem 0;
  background:var(--bg2);
}
.ticker-track {
  display:flex;
  align-items:center;
  gap:1.5rem;
  white-space:nowrap;
  animation:ticker 40s linear infinite;
}
.tick-item {
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.tick-sep { color:var(--border2); }
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── VERTICALS ─────────────────────────────────── */
.verticals { background:var(--bg); padding:7rem 0; }
.verticals-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.vertical-card {
  background:var(--bg2);
  padding:3.5rem;
  position:relative;
  overflow:hidden;
  transition:background .3s;
  border:1px solid var(--border);
}
.vertical-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  width:0;
  transition:width .4s ease;
}
.vc-ai::before   { background:var(--accent); }
.vc-sec::before  { background:var(--red); }
.vertical-card:hover { background:var(--bg3); }
.vertical-card:hover::before { width:100%; }

.vc-number {
  font-family:var(--font-head);
  font-size:5rem;
  font-weight:800;
  color:var(--border2);
  line-height:1;
  position:absolute;
  top:1.5rem; right:2rem;
  transition:color .3s;
  user-select:none;
}
.vertical-card:hover .vc-number { color:rgba(0,229,200,.1); }
.vc-sec:hover .vc-number { color:rgba(255,77,109,.1); }

.vc-icon {
  color:var(--accent);
  margin-bottom:1.5rem;
}
.vc-sec .vc-icon { color:var(--red); }

.vertical-card h3 {
  font-size:1.6rem;
  margin-bottom:1rem;
}
.vertical-card p {
  font-size:.82rem;
  color:var(--muted);
  line-height:1.85;
  margin-bottom:1.5rem;
  max-width:400px;
}

.vc-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin-bottom:2rem;
}
.vc-tags li {
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .65rem;
  border:1px solid var(--border2);
  color:var(--muted);
  transition:border-color .2s,color .2s;
}
.vc-ai:hover .vc-tags li  { border-color:rgba(0,229,200,.3); color:var(--accent); }
.vc-sec:hover .vc-tags li { border-color:rgba(255,77,109,.3); color:var(--red); }

.vc-link {
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:gap .2s;
}
.vc-sec .vc-link { color:var(--red); }
.vc-link:hover { gap:.8rem; }

/* ── SERVICES ──────────────────────────────────── */
.services-overview { background:var(--bg2); }
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.srv-card {
  background:var(--bg2);
  padding:2.5rem;
  position:relative;
  overflow:hidden;
  transition:background .3s;
}
.srv-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0;
  height:2px; width:0;
  background:var(--accent);
  transition:width .35s ease;
}
.srv-card:hover { background:var(--bg3); }
.srv-card:hover::after { width:100%; }

.srv-num {
  position:absolute;
  top:1.5rem; right:1.8rem;
  font-size:.62rem;
  color:var(--border2);
  letter-spacing:.1em;
}
.srv-icon {
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:1.2rem;
  display:block;
}
.srv-card h3 {
  font-size:1rem;
  font-weight:700;
  margin-bottom:.7rem;
}
.srv-card p {
  font-size:.78rem;
  color:var(--muted);
  line-height:1.8;
}
.services-cta { text-align:center; margin-top:3rem; }

/* ── PRODUCT SPOTLIGHT ─────────────────────────── */
.product-spotlight {
  background:var(--bg);
  padding:7rem 0;
}
.spotlight-inner {
  border:1px solid var(--border);
  padding:4rem;
  position:relative;
  overflow:hidden;
}
.spotlight-inner::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 60%);
}
.spotlight-label {
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:2rem;
}
.spotlight-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.product-badge {
  display:inline-block;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.3rem .8rem;
  border:1px solid var(--accent);
  color:var(--accent);
  margin-bottom:1.2rem;
}
.spotlight-title {
  font-size:clamp(2.5rem,5vw,4rem);
  margin-bottom:1.2rem;
}
.spotlight-sub {
  font-size:.85rem;
  color:var(--muted);
  line-height:1.85;
  margin-bottom:2rem;
  max-width:440px;
}
.spotlight-feats {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-bottom:2.5rem;
}
.spotlight-feats li {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.8rem;
  color:var(--muted);
}
.spotlight-feats li svg { color:var(--accent); flex-shrink:0; }
.spotlight-actions { display:flex; gap:.8rem; flex-wrap:wrap; }

/* Terminal */
.terminal {
  background:var(--bg);
  border:1px solid var(--border2);
  font-size:.75rem;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.terminal-bar {
  background:#1a2030;
  padding:.7rem 1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  border-bottom:1px solid var(--border);
}
.tb-dot {
  width:10px; height:10px;
  border-radius:50%;
}
.td-red    { background:#ff5f56; }
.td-yellow { background:#ffbd2e; }
.td-green  { background:#27c93f; }
.tb-title {
  font-size:.65rem;
  color:var(--muted);
  margin-left:.5rem;
  letter-spacing:.06em;
}
.terminal-body {
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.t-line { font-size:.73rem; line-height:1.5; }
.t-prompt { color:var(--accent); margin-right:.5rem; }
.t-dim    { color:var(--muted2); }
.t-key    { color:var(--red); font-weight:500; font-size:.8rem; letter-spacing:.06em; }
.t-label  { color:var(--muted); display:inline-block; width:90px; }
.t-val    { color:var(--text); }
.t-alert  { color:var(--yellow); font-weight:500; }
.cursor-blink { animation:blink 1.2s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── PROCESS ───────────────────────────────────── */
.process { background:var(--bg2); }
.process-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--border);
  position:relative;
}
.process-step {
  padding:2.5rem;
  border-right:1px solid var(--border);
  position:relative;
  transition:background .3s;
}
.process-step:last-child { border-right:none; }
.process-step:hover { background:var(--bg3); }

.ps-num {
  font-family:var(--font-head);
  font-size:3.5rem;
  font-weight:800;
  color:var(--border2);
  line-height:1;
  margin-bottom:.8rem;
  transition:color .3s;
}
.process-step:hover .ps-num { color:rgba(0,229,200,.2); }
.process-step h3 {
  font-size:.95rem;
  font-weight:700;
  margin-bottom:.6rem;
}
.process-step p {
  font-size:.75rem;
  color:var(--muted);
  line-height:1.8;
}

/* ── BLOG PREVIEW ──────────────────────────────── */
.blog-preview { background:var(--bg); }
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.blog-card {
  display:block;
  background:var(--bg2);
  border:1px solid var(--border);
  padding:2rem;
  text-decoration:none;
  color:var(--text);
  transition:border-color .25s,background .25s,transform .25s;
}
.blog-card:hover {
  border-color:var(--border2);
  background:var(--bg3);
  transform:translateY(-3px);
}
.blog-cat {
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.8rem;
}
.blog-card h3 {
  font-size:1rem;
  line-height:1.3;
  margin-bottom:.7rem;
}
.blog-card p {
  font-size:.78rem;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:1.2rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-meta {
  display:flex;
  gap:1rem;
  font-size:.65rem;
  color:var(--muted2);
}

/* ── CTA SECTION ───────────────────────────────── */
.cta-section { background:var(--bg); padding:8rem 0; }
.cta-inner {
  border:1px solid var(--border);
  padding:5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--bg2);
}
.cta-inner::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.cta-orb {
  position:absolute;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,200,.07) 0%,transparent 65%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cta-eyebrow {
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.cta-title {
  font-size:clamp(2.5rem,5vw,4.5rem);
  position:relative;
  z-index:1;
  margin-bottom:1.2rem;
}
.cta-sub {
  font-size:.85rem;
  color:var(--muted);
  max-width:420px;
  margin:0 auto 2.5rem;
  line-height:1.85;
}
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-calendar {
  margin-top:1.5rem;
  font-size:.75rem;
  color:var(--muted2);
}
.cta-calendar a { color:var(--accent); text-decoration:none; }

/* ── FORMS ─────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
input[type=text],input[type=email],input[type=url],input[type=number],select,textarea {
  background:var(--bg2);
  border:1px solid var(--border2);
  color:var(--text);
  padding:.75rem 1rem;
  font-family:var(--font-mono);
  font-size:.85rem;
  border-radius:var(--radius);
  transition:border-color .2s;
  width:100%;
}
input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--accent);
}
textarea { resize:vertical; min-height:120px; }

/* ── PAGE HERO (inner pages) ───────────────────── */
.page-hero {
  padding:10rem 0 5rem;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.2;
}


/* ── VERTICALS 6-PANEL GRID ────────────────────────────────── */
.verticals-grid-6 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--border);
  border:1px solid var(--border);
}

.vertical-card-6 {
  background:var(--bg2);
  padding:2.8rem;
  position:relative;
  overflow:hidden;
  transition:background .3s;
  border:none;
}
.vertical-card-6::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  width:0;
  background:var(--vc-accent, var(--accent));
  transition:width .4s ease;
}
.vertical-card-6:hover { background:var(--bg3); }
.vertical-card-6:hover::before { width:100%; }

.vc6-number {
  font-family:var(--font-head);
  font-size:4rem;
  font-weight:800;
  color:var(--border2);
  line-height:1;
  position:absolute;
  top:1.2rem; right:1.5rem;
  transition:color .3s;
  user-select:none;
}
.vertical-card-6:hover .vc6-number {
  color:color-mix(in srgb, var(--vc-accent) 12%, transparent);
}

.vc6-icon {
  margin-bottom:1.3rem;
}

.vc6-title {
  font-size:1.1rem;
  font-weight:800;
  margin-bottom:.7rem;
  line-height:1.25;
}

.vc6-desc {
  font-size:.79rem;
  color:var(--muted);
  line-height:1.85;
  margin-bottom:1.2rem;
  max-width:320px;
}

.vc6-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  list-style:none;
  margin-bottom:1.5rem;
}
.vc6-tags li {
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.22rem .6rem;
  border:1px solid var(--border2);
  color:var(--muted);
  transition:border-color .2s,color .2s;
}
.vertical-card-6:hover .vc6-tags li {
  border-color:color-mix(in srgb, var(--vc-accent) 40%, transparent);
  color:var(--vc-accent, var(--accent));
}

.vc6-link {
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  transition:gap .2s;
}
.vc6-link:hover { gap:.8rem; }

@media(max-width:1024px) {
  .verticals-grid-6 { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
  .verticals-grid-6 { grid-template-columns:1fr; }
  .vertical-card-6 { padding:2rem 1.5rem; }
}

/* ── ADMIN STYLES ──────────────────────────────── */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width:220px;
  flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:2rem 1.5rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.admin-sidebar h2 { font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.admin-sidebar a {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; font-size:.8rem; color:var(--muted);
  text-decoration:none; border-radius:var(--radius);
  transition:background .15s,color .15s; margin-bottom:.2rem;
}
.admin-sidebar a:hover,
.admin-sidebar a.active { background:var(--bg3); color:var(--text); }
.admin-sidebar a.active { border-left:2px solid var(--accent); }
.admin-main { flex:1; padding:2.5rem; overflow-x:auto; }
.admin-title { font-size:1.5rem; font-weight:800; margin-bottom:.3rem; }
.admin-sub { font-size:.8rem; color:var(--muted); margin-bottom:2rem; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.stat-box { background:var(--bg2); border:1px solid var(--border); padding:1.5rem; }
.stat-box .num { font-size:1.8rem; font-weight:800; font-family:var(--font-head); }
.stat-box .lbl { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.3rem; }

.data-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.data-table th { padding:.7rem 1rem; text-align:left; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:2px solid var(--border); }
.data-table td { padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table tr:hover td { background:var(--bg2); }

.badge {
  display:inline-block;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.2rem .6rem;
  border-radius:var(--radius);
}
.badge-new     { background:rgba(0,229,200,.12); color:var(--accent); }
.badge-active  { background:rgba(39,201,63,.12);  color:#27c93f; }
.badge-pending { background:rgba(245,200,66,.12); color:var(--yellow); }
.badge-closed  { background:rgba(107,119,147,.12);color:var(--muted); }
.badge-won     { background:rgba(0,229,200,.2);   color:var(--accent); }
.badge-lost    { background:rgba(255,77,109,.12); color:var(--red); }

.card { background:var(--bg2); border:1px solid var(--border); padding:1.5rem; margin-bottom:1.5rem; }
.card h3 { font-size:1rem; font-weight:700; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--border); }

/* ── SCROLL REVEAL ─────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible { opacity:1; transform:none; }

/* ── ANIMATIONS ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

/* ── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .spotlight-grid { grid-template-columns:1fr; }
  .spotlight-inner { padding:2.5rem; }
}

@media (max-width: 768px) {
  .navbar { padding:1rem 1.25rem; }
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:block; }
  section { padding:4rem 0; }
  .hero { padding:6rem 0 4rem; }
  .hero-title { font-size:3.2rem; }
  .verticals-grid { grid-template-columns:1fr; }
  .vertical-card { padding:2.5rem 1.5rem; }
  .services-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .process-step { border-right:none; border-bottom:1px solid var(--border); }
  .blog-grid { grid-template-columns:1fr; }
  .cta-inner { padding:3rem 1.5rem; }
  .hero-metrics { gap:1.5rem; }
  .hero-scroll-hint { display:none; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .admin-sidebar { display:none; }
  .admin-main { padding:1.5rem; }
}

/* ── Process step components ──────────────────────────────── */
.ps-connector {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.ps-dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0,229,200,.5);
}
.ps-content {
  padding-top: .5rem;
}

/* ── ThreatFade spotlight two-column ───────────────────────── */
.spotlight-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotlight-right {
  display: flex;
  align-items: center;
}
@media (max-width: 900px) {
  .spotlight-left,
  .spotlight-right {
    width: 100%;
  }
}

/* ── Terminal typewriter animation ─────────────────────────── */
.typewriter .t-line {
  overflow: hidden;
  animation: type-in .4s ease forwards;
  opacity: 0;
}
.typewriter .t-line:nth-child(1)  { animation-delay: .1s; }
.typewriter .t-line:nth-child(2)  { animation-delay: .4s; }
.typewriter .t-line:nth-child(3)  { animation-delay: .7s; }
.typewriter .t-line:nth-child(4)  { animation-delay: 1.0s; }
.typewriter .t-line:nth-child(5)  { animation-delay: 1.3s; }
.typewriter .t-line:nth-child(6)  { animation-delay: 1.5s; }
.typewriter .t-line:nth-child(7)  { animation-delay: 1.7s; }
.typewriter .t-line:nth-child(8)  { animation-delay: 1.9s; }
.typewriter .t-line:nth-child(9)  { animation-delay: 2.1s; }
.typewriter .t-line:nth-child(10) { animation-delay: 2.3s; }
.typewriter .t-line:nth-child(11) { animation-delay: 2.5s; }
.typewriter .t-line:nth-child(12) { animation-delay: 2.7s; }
.typewriter .t-line:nth-child(13) { animation-delay: 2.9s; }
@keyframes type-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.t-blink {
  animation: blink-cursor .8s step-end infinite;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Utility buttons ────────────────────────────────────────── */
.btn-sm {
  padding: .3rem .8rem;
  font-size: .7rem;
  font-family: var(--font-mono);
  border: 1px solid var(--border2);
  color: var(--muted);
  background: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  display: inline-block;
}
.btn-sm:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.copy-link-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .25rem .6rem;
  font-size: .68rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .2s;
}
.copy-link-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Calendly embed ─────────────────────────────────────────── */
.calendly-inline-widget {
  min-width: 320px;
  height: 630px;
  border: 1px solid var(--border);
}
/* ── Critical media rules ──────────────────────────────────── */
img,video,iframe,embed { display:block; max-width:100% }
img { height:auto }
img:not([width]) { width:100% }
@font-face { font-display:swap }
.testimonials-section,.stats-section { content-visibility:auto; contain-intrinsic-size:0 400px }
.hero-title { font-family:'Syne',system-ui,sans-serif }
.hero-sub { font-family:'DM Mono',monospace }
#sticky-cta { will-change:transform }

/* ── Light / dark theme overrides ──────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f7fa; --bg2: #edf0f5; --bg3: #e2e6ef;
    --text: #0f1117; --muted: #4a5568; --muted2: #718096;
    --border: #d1d9e6; --border2: #c0cad9; --accent: #00b8a0;
  }
}
[data-theme="light"] {
  --bg: #f5f7fa; --bg2: #edf0f5; --bg3: #e2e6ef;
  --text: #0f1117; --muted: #4a5568; --muted2: #718096;
  --border: #d1d9e6; --border2: #c0cad9; --accent: #00b8a0;
}
body,.card,.admin-main,.admin-sidebar {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}