/* ============================================================
   LRC AUTOMATION LEADS — DESIGN SYSTEM v4
   Clean, Premium Dark UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* =========== CSS VARIABLES =========== */
:root {
  --bg:          #000000;
  --surface:     #0a0a0a;
  --surface-2:   #111111;
  --surface-3:   #161616;
  --border:      #1f1f1f;
  --border-2:    #2a2a2a;

  --white:       #ffffff;
  --text-hi:     #ffffff;
  --text-md:     #a1a1aa;
  --text-lo:     #52525b;

  --accent:      #0070f3;
  --accent-lt:   #60a5fa;
  --accent-glow: rgba(0,112,243,0.18);
  --wa:          #25D366;

  --font:        'Inter', -apple-system, sans-serif;
  --mono:        'JetBrains Mono', monospace;

  --max-w:       1180px;
  --nav-h:       70px;

  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.6);
  --shadow-md: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.7);
  --glow:      0 0 50px rgba(0,112,243,.12);

  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: 150ms ease;
  --t-base: 240ms ease;
  --t-slow: 500ms var(--ease);
}

/* =========== RESET =========== */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { color: var(--text-hi); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; transition: var(--t-fast); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button,input,select,textarea { font-family: var(--font); }
input,select,textarea { color-scheme: dark; }

/* =========== LAYOUT =========== */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.section    { padding: 100px 0; }
.section-sm { padding: 64px 0; }

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

/* =========== TYPOGRAPHY =========== */
.label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent);
}
.section-label {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 18px;
}
.section-label span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.section-label::before,.section-label::after {
  content:''; display:block; height:1px; width:24px; background:var(--accent); opacity:.5;
}
.section-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; color: var(--text-hi); }
.section-desc  { font-size: 1.05rem; color: var(--text-md); line-height: 1.75; max-width: 580px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header .section-title { margin-bottom: 14px; }

.text-gradient-w { background: linear-gradient(135deg,#fff 0%,#a1a1aa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-b { background: linear-gradient(135deg,#0070f3 0%,#00d4ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* =========== BUTTONS =========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 22px;
  font-size: .875rem; font-weight: 600;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; transition: var(--t-base); white-space: nowrap;
  line-height: 1;
}
.btn-primary { background:#fff; color:#000; border-color:#fff; }
.btn-primary:hover { background:#e8e8e8; border-color:#e8e8e8; transform:translateY(-1px); }
.btn-secondary { background:transparent; color:#fff; border-color:var(--border-2); }
.btn-secondary:hover { background:var(--surface-2); border-color:#3a3a3a; transform:translateY(-1px); }
.btn-accent  { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover  { background:#005dd4; transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }
.btn-wa      { background:var(--wa); color:#fff; border-color:var(--wa); }
.btn-wa:hover  { background:#20ba5a; transform:translateY(-1px); box-shadow:0 4px 20px rgba(37,211,102,.25); }
.btn-lg { padding:13px 28px; font-size:.95rem; border-radius:var(--r-lg); }
.btn-sm { padding:7px 14px; font-size:.78rem; border-radius:var(--r-sm); }

/* =========== BADGE / TAG =========== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-md);
}
.badge-blue { background:rgba(0,112,243,.12); border-color:rgba(0,112,243,.25); color:var(--accent-lt); }
.badge-green { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#4ade80; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s infinite; }

/* =========== NAVIGATION =========== */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  height: var(--nav-h); transition: var(--t-base);
}
.nav.scrolled {
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo-img {
  height: 38px; width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.2));
}
.nav-logo img {
  height: 38px; width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.2));
}
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link {
  padding: 7px 13px; font-size:.875rem; font-weight:500;
  color: var(--text-md); border-radius: var(--r-sm);
  transition: var(--t-fast);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-fast);
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-link.active::after {
  transform: scaleX(1);
  background: var(--text-hi);
}
.nav-link:hover { color:var(--text-hi); background:var(--surface-2); }
.nav-link.active { color:var(--text-hi); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.nav-toggle {
  display: none; background:none; border:1px solid var(--border-2);
  border-radius:var(--r-sm); padding:8px; color:var(--text-hi); cursor:pointer;
  position: relative; z-index: 1100;
}
/* Mobile nav drawer */
.nav-mobile {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  background:rgba(0,0,0,.97); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  z-index:999;
}
.nav-mobile.open { display:flex; }
.nav-mobile .nav-link { font-size:1.25rem; padding:14px 32px; width:220px; text-align:center; border-radius:var(--r-md); }

/* =========== HERO =========== */
.hero {
  min-height: 100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: calc(var(--nav-h) + 60px) 28px 80px;
  text-align:center; position:relative; overflow:hidden;
}
.hero-glow {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:900px; height:600px;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,112,243,.18) 0%, transparent 68%);
  pointer-events:none;
}
.hero-grid-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:.35; pointer-events:none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}
.hero-content { position:relative; z-index:1; max-width:860px; }
.hero-eyebrow { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:28px; }
.hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900; letter-spacing: -.05em; line-height: 1.0;
  color: var(--text-hi); margin-bottom: 28px;
}
.hero-desc {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-md); line-height: 1.75;
  max-width: 580px; margin: 0 auto 44px;
}
.hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:64px; }
.hero-stats {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}
.hero-stat { padding:18px 32px; border-right:1px solid var(--border); text-align:center; }
.hero-stat:last-child { border-right:none; }
.hero-stat-num { font-size:1.6rem; font-weight:900; color:var(--text-hi); line-height:1; margin-bottom:4px; letter-spacing:-.03em; }
.hero-stat-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-lo); }

/* =========== SERVICES =========== */
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden;
}
.service-cell {
  background: var(--bg); padding: 48px;
  transition: background var(--t-base);
  display: flex; flex-direction: column;
}
.service-cell:hover { background: var(--surface); }
.service-num { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-lo); margin-bottom:24px; }
.service-icon {
  width:52px; height:52px; border-radius:var(--r-lg);
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); margin-bottom:24px; flex-shrink:0;
}
.service-title { font-size:1.3rem; font-weight:700; color:var(--text-hi); margin-bottom:10px; }
.service-desc { font-size:.875rem; color:var(--text-md); line-height:1.7; margin-bottom:24px; flex-grow:1; }
.service-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
.service-tag { padding:3px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); font-size:.68rem; font-weight:600; color:var(--text-lo); }
.service-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; color:var(--accent); margin-top:auto;
}
.service-link svg { transition:transform var(--t-fast); }
.service-cell:hover .service-link svg { transform:translateX(4px); }

/* =========== WHY SECTION =========== */
.why-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.why-features { display:flex; flex-direction:column; gap:28px; }
.why-feature { display:flex; gap:18px; }
.why-feature-icon {
  width:42px; height:42px; border-radius:var(--r-md); flex-shrink:0;
  background:rgba(0,112,243,.08); border:1px solid rgba(0,112,243,.15);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  margin-top:3px;
}
.why-feature-text h3 { font-size:.95rem; font-weight:700; color:var(--text-hi); margin-bottom:5px; }
.why-feature-text p { font-size:.825rem; color:var(--text-md); line-height:1.65; }
.why-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:28px 24px; text-align:center; transition:var(--t-base);
}
.stat-card:hover { border-color:var(--accent); box-shadow:var(--glow); }
.stat-num { font-size:2.2rem; font-weight:900; color:var(--accent); line-height:1; margin-bottom:6px; letter-spacing:-.03em; }
.stat-label { font-size:.8rem; font-weight:600; color:var(--text-hi); margin-bottom:4px; }
.stat-desc { font-size:.72rem; color:var(--text-lo); line-height:1.5; }

/* =========== PROCESS =========== */
.process-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden;
}
.process-cell {
  background:var(--bg); padding:40px 32px;
  transition:background var(--t-base); position:relative;
}
.process-cell:hover { background:var(--surface); }
.process-cell-num {
  font-size:2.8rem; font-weight:900; color:var(--border-2);
  line-height:1; margin-bottom:20px; font-variant-numeric:tabular-nums;
  transition:color var(--t-base);
}
.process-cell:hover .process-cell-num { color:var(--surface-3); }
.process-cell-title { font-size:1rem; font-weight:700; color:var(--text-hi); margin-bottom:10px; }
.process-cell-desc { font-size:.825rem; color:var(--text-md); line-height:1.65; }

/* =========== TESTIMONIAL =========== */
.testimonial-wrap { max-width:720px; margin:0 auto; }
.testimonial-card {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-2xl); padding:48px;
}
.stars { display:flex; gap:3px; color:#fbbf24; margin-bottom:24px; font-size:1.1rem; }
.testimonial-quote { font-size:1.15rem; font-weight:500; color:var(--text-hi); line-height:1.75; font-style:italic; margin-bottom:32px; }
.testimonial-author { display:flex; align-items:center; gap:14px; }
.t-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--border-2); }
.t-name { font-size:.9rem; font-weight:700; color:var(--text-hi); }
.t-role { font-size:.78rem; color:var(--text-lo); }

/* =========== BLOG =========== */
.blog-controls {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px; flex-wrap:wrap; gap:16px;
  padding-bottom:24px; border-bottom:1px solid var(--border);
}
.blog-filters { display:flex; gap:6px; flex-wrap:wrap; }
.bf {
  padding:7px 16px; font-size:.78rem; font-weight:600;
  border:1px solid var(--border); border-radius:var(--r-full);
  background:var(--surface); color:var(--text-md); cursor:pointer; transition:var(--t-fast);
}
.bf:hover { border-color:var(--border-2); color:var(--text-hi); }
.bf.active { background:var(--text-hi); color:var(--bg); border-color:var(--text-hi); }

/* Featured post */
.blog-featured {
  display:grid; grid-template-columns:1.1fr .9fr;
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  background:var(--surface); margin-bottom:20px; min-height:360px;
}
.blog-feat-img { overflow:hidden; position:relative; }
.blog-feat-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-featured:hover .blog-feat-img img { transform:scale(1.04); }
.blog-feat-tag {
  position:absolute; top:18px; left:18px;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  background:rgba(0,0,0,.8); color:#fff; padding:4px 12px; border-radius:var(--r-full);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1);
}
.blog-feat-body { padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.blog-feat-cat {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.blog-feat-cat::before { content:''; display:block; width:20px; height:2px; background:var(--accent); }
.blog-feat-title { font-size:1.55rem; font-weight:800; color:var(--text-hi); letter-spacing:-.025em; line-height:1.3; margin-bottom:14px; }
.blog-feat-desc { font-size:.875rem; color:var(--text-md); line-height:1.7; margin-bottom:24px; }
.blog-feat-meta { display:flex; gap:16px; font-size:.75rem; color:var(--text-lo); margin-bottom:28px; }
.blog-feat-link {
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  padding:10px 20px; background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--r-md); font-size:.82rem; font-weight:700; color:var(--text-hi);
  transition:var(--t-fast);
}
.blog-feat-link:hover { background:var(--surface-3); border-color:#3a3a3a; }

/* Blog grid */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.blog-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.blog-card:hover { border-color:var(--border-2); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.blog-card.hide { display:none; }
.blog-card-img { overflow:hidden; aspect-ratio:16/9; background:var(--surface-2); position:relative; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.blog-card:hover .blog-card-img img { transform:scale(1.06); }
.blog-card-tag {
  position:absolute; top:12px; left:12px;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  background:rgba(0,0,0,.78); color:#fff; padding:3px 10px; border-radius:var(--r-full);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
}
.blog-card-body { padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.blog-card-meta { display:flex; gap:10px; font-size:.72rem; color:var(--text-lo); margin-bottom:10px; }
.blog-card-title {
  font-size:.95rem; font-weight:700; color:var(--text-hi); line-height:1.4;
  margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-desc {
  font-size:.8rem; color:var(--text-md); line-height:1.65; margin-bottom:18px;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; flex-grow:1;
}
.blog-card-link {
  display:inline-flex; align-items:center; gap:5px; margin-top:auto;
  font-size:.78rem; font-weight:700; color:var(--accent);
}
.blog-card-link svg { transition:transform var(--t-fast); }
.blog-card:hover .blog-card-link svg { transform:translateX(4px); }

/* =========== CTA SECTION =========== */
.cta-band {
  background:var(--surface); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cta-inner { max-width:640px; margin:0 auto; text-align:center; padding:80px 28px; }
.cta-title { font-size:clamp(1.75rem,3.5vw,2.6rem); font-weight:900; letter-spacing:-.04em; color:var(--text-hi); margin-bottom:16px; }
.cta-desc { font-size:1rem; color:var(--text-md); line-height:1.75; margin-bottom:36px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =========== ABOUT HERO =========== */
.page-hero {
  padding:calc(var(--nav-h) + 80px) 28px 72px;
  text-align:center; position:relative;
}
.page-hero-title { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; letter-spacing:-.04em; margin-bottom:18px; }
.page-hero-desc { font-size:1.05rem; color:var(--text-md); max-width:580px; margin:0 auto; line-height:1.75; }

/* =========== ABOUT GRID =========== */
.about-story-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; margin-bottom:40px; }
.about-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px;
}
.about-card h2 { font-size:1.5rem; font-weight:800; letter-spacing:-.025em; margin-bottom:16px; }
.about-card p { font-size:.9rem; color:var(--text-md); line-height:1.75; }
.about-card p + p { margin-top:14px; }
.about-quote {
  font-size:1.05rem; font-style:italic; color:var(--text-hi); font-weight:500;
  border-left:3px solid var(--accent); padding-left:20px; margin-top:20px; line-height:1.7;
}
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:32px 28px; transition:border-color var(--t-base), box-shadow var(--t-base);
}
.value-card:hover { border-color:var(--accent); box-shadow:var(--glow); }
.value-icon {
  width:48px; height:48px; border-radius:var(--r-lg);
  background:rgba(0,112,243,.1); border:1px solid rgba(0,112,243,.2);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  margin-bottom:20px;
}
.value-title { font-size:1rem; font-weight:700; color:var(--text-hi); margin-bottom:10px; }
.value-desc { font-size:.825rem; color:var(--text-md); line-height:1.65; }

/* =========== SERVICES PAGE =========== */
.svc-section { padding:72px 0; border-bottom:1px solid var(--border); }
.svc-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.svc-layout.flip { direction:rtl; }
.svc-layout.flip > * { direction:ltr; }
.svc-num { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-lo); margin-bottom:12px; }
.svc-title { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; letter-spacing:-.03em; margin-bottom:14px; }
.svc-desc { font-size:.9rem; color:var(--text-md); line-height:1.75; margin-bottom:24px; }
.svc-bullets { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.svc-bullet { display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:500; color:var(--text-hi); }
.svc-bullet svg { color:var(--accent); flex-shrink:0; }
.svc-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px; }
.svc-panel-title { font-size:.8rem; font-weight:700; color:var(--text-hi); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); }

/* chat mockup */
.chat-mock { display:flex; flex-direction:column; gap:10px; }
.cm { padding:10px 14px; border-radius:14px; font-size:.825rem; line-height:1.55; max-width:88%; }
.cm.recv { background:var(--surface-2); border:1px solid var(--border); color:var(--text-md); align-self:flex-start; border-bottom-left-radius:4px; }
.cm.sent { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }

/* pipeline */
.pipeline { display:flex; flex-direction:column; gap:10px; }
.pl-step { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; }
.pl-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:4px; }
.pl-text { font-size:.825rem; color:var(--text-md); line-height:1.55; }

/* day row */
.day-row { display:flex; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; align-items:flex-start; font-size:.825rem; }
.day-badge { font-weight:800; color:var(--accent); flex-shrink:0; min-width:44px; }

/* metric 2-col */
.metric-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.metric-box { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; text-align:center; }
.metric-val { font-size:2rem; font-weight:900; color:var(--accent); line-height:1; margin-bottom:6px; letter-spacing:-.03em; }
.metric-lab { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-lo); font-weight:600; }

/* code window */
.code-win { background:#000; border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; }
.code-win-bar { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; gap:6px; align-items:center; }
.cd { width:10px; height:10px; border-radius:50%; }
.cd.r{background:#ff5f56;}.cd.y{background:#ffbd2e;}.cd.g{background:#27c93f;}
.code-body { padding:18px 20px; font-family:var(--mono); font-size:.78rem; line-height:1.75; color:#d4d4d4; }
.ck{color:#c678dd;}.cf{color:#61afef;}.cs{color:#98c379;}.cn{color:#d19a66;}.cc{color:#5c6370;font-style:italic;}

/* =========== CONTACT PAGE =========== */
.contact-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:24px; }
.contact-box {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:32px;
}
.c-item { display:flex; gap:14px; align-items:flex-start; }
.c-icon {
  width:42px; height:42px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.c-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-lo); margin-bottom:3px; }
.c-val { font-size:.9rem; font-weight:600; color:var(--text-hi); }
.c-sub { font-size:.78rem; color:var(--text-md); margin-top:2px; }
.c-link { color:var(--accent); font-weight:600; font-size:.875rem; }
.c-link:hover { color:var(--accent-lt); }
.social-row { display:flex; gap:8px; }
.s-btn {
  width:38px; height:38px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-md); transition:var(--t-fast); cursor:pointer;
}
.s-btn:hover { border-color:var(--border-2); color:var(--text-hi); background:var(--surface-3); }
.map-mock {
  height:220px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center;
  background-image:radial-gradient(var(--border) 1px, transparent 1px);
  background-size:24px 24px; margin-top:24px;
}
.map-inner { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--accent); }
.map-dot { width:40px; height:40px; border-radius:50%; background:rgba(0,112,243,.12); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; }
.map-lbl { font-size:.78rem; font-weight:600; color:var(--text-md); }
.contact-form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px; }

/* Form */
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-label { font-size:.78rem; font-weight:600; color:var(--text-hi); }
.form-input,.form-select,.form-textarea {
  width:100%; padding:11px 15px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text-hi); font-size:.875rem; transition:var(--t-fast);
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-lo); }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,112,243,.12); }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.form-textarea { min-height:110px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-status { padding:12px 16px; border-radius:var(--r-md); font-size:.875rem; font-weight:600; display:none; }
.form-status.success { display:block; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#4ade80; }
.form-status.error { display:block; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:#f87171; }

/* =========== MODAL =========== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  backdrop-filter:blur(14px); z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity var(--t-base);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-wrap {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-2xl); width:100%; max-width:820px;
  overflow:hidden; display:grid; grid-template-columns:280px 1fr;
  position:relative;
  transform:translateY(20px) scale(.98); transition:transform var(--t-slow);
}
.modal-overlay.open .modal-wrap { transform:translateY(0) scale(1); }
.modal-sidebar {
  background:var(--surface-2); padding:40px 32px;
  display:flex; flex-direction:column; gap:20px;
  border-right:1px solid var(--border);
}
.modal-brand { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--text-lo); }
.modal-title { font-size:1.4rem; font-weight:900; letter-spacing:-.03em; color:var(--text-hi); }
.modal-info { display:flex; flex-direction:column; gap:12px; }
.modal-info-row { display:flex; align-items:center; gap:10px; font-size:.825rem; color:var(--text-md); }
.modal-info-row svg { color:var(--accent); flex-shrink:0; }
.modal-contact-txt { font-size:.75rem; color:var(--text-lo); margin-top:auto; }
.modal-body { padding:36px; overflow-y:auto; max-height:520px; }
.modal-body h4 { font-size:1.05rem; font-weight:800; color:var(--text-hi); margin-bottom:24px; }
.modal-close {
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-md); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--t-fast); z-index:10;
}
.modal-close:hover { background:var(--surface-3); color:var(--text-hi); }
.modal-form-grid { display:flex; flex-direction:column; gap:16px; }
.modal-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* =========== FOOTER =========== */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:64px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo-img { height:32px; filter:brightness(0) invert(1); opacity:.85; }
.footer-desc { font-size:.825rem; color:var(--text-lo); line-height:1.7; max-width:240px; }
.footer-col-head { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-md); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-links a { font-size:.825rem; color:var(--text-lo); transition:var(--t-fast); }
.footer-links a:hover { color:var(--text-hi); }
.footer-newsletter-row { display:flex; gap:8px; }
.fnl-input {
  flex:1; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:9px 12px;
  color:var(--text-hi); font-size:.825rem; transition:var(--t-fast);
}
.fnl-input:focus { outline:none; border-color:var(--accent); }
.fnl-input::placeholder { color:var(--text-lo); }
.fnl-btn {
  width:40px; height:40px; border-radius:var(--r-md); background:var(--accent);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--t-fast); flex-shrink:0;
}
.fnl-btn:hover { background:#005dd4; }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-bottom p { font-size:.78rem; color:var(--text-lo); }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { font-size:.78rem; color:var(--text-lo); transition:var(--t-fast); }
.footer-legal a:hover { color:var(--text-hi); }

/* =========== WHATSAPP WIDGET =========== */
.wa-widget { position:fixed; bottom:24px; left:24px; z-index:998; }
.wa-btn {
  width:54px; height:54px; background:var(--wa); border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 18px rgba(37,211,102,.35); cursor:pointer;
  transition:transform var(--t-base), box-shadow var(--t-base);
  position:relative;
}
.wa-btn:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,211,102,.45); }
.wa-notif {
  position:absolute; top:-2px; right:-2px; width:17px; height:17px;
  background:#ef4444; border-radius:50%; border:2px solid #000;
  font-size:.55rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.wa-popup {
  position:absolute; bottom:62px; left:0; width:290px;
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-xl);
  overflow:hidden;
  transform:translateY(10px) scale(.95); opacity:0; pointer-events:none;
  transition:var(--t-slow); transform-origin:bottom left;
}
.wa-popup.open { transform:translateY(0) scale(1); opacity:1; pointer-events:all; }
.wa-popup-header { background:#075e54; padding:14px 18px; display:flex; align-items:center; gap:12px; }
.wa-popup-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.3); }
.wa-popup-name { font-size:.875rem; font-weight:700; color:#fff; }
.wa-popup-role { font-size:.72rem; color:rgba(255,255,255,.7); }
.wa-popup-body { background:#0d1117; padding:16px 18px; }
.wa-popup-msg { background:#1c2b22; border-radius:0 12px 12px 12px; padding:10px 14px; font-size:.8rem; color:#e0e0e0; line-height:1.55; max-width:90%; }
.wa-popup-footer { padding:12px 16px; border-top:1px solid var(--border); }
.wa-open-btn {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:10px; background:var(--wa); color:#fff; border:none; border-radius:var(--r-md);
  font-size:.825rem; font-weight:700; cursor:pointer; transition:var(--t-fast);
}
.wa-open-btn:hover { background:#20ba5a; }

/* =========== BLOG POST =========== */
.post-hero { padding:calc(var(--nav-h) + 64px) 28px 56px; text-align:center; border-bottom:1px solid var(--border); }
.post-chip { display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); background:rgba(0,112,243,.1); border:1px solid rgba(0,112,243,.2); padding:4px 14px; border-radius:var(--r-full); margin-bottom:18px; }
.post-heading { font-size:clamp(1.75rem,4vw,2.9rem); font-weight:900; letter-spacing:-.04em; color:var(--text-hi); max-width:720px; margin:0 auto 18px; line-height:1.2; }
.post-meta-row { display:flex; align-items:center; justify-content:center; gap:18px; font-size:.78rem; color:var(--text-lo); }
.post-article { max-width:720px; margin:0 auto; padding:64px 28px; }
.post-article h2 { font-size:1.5rem; font-weight:800; letter-spacing:-.025em; margin:44px 0 18px; }
.post-article h3 { font-size:1.2rem; font-weight:700; margin:32px 0 14px; }
.post-article p { font-size:.95rem; color:var(--text-md); line-height:1.8; margin-bottom:22px; }
.post-article ul,.post-article ol { padding-left:24px; margin-bottom:22px; }
.post-article li { font-size:.95rem; color:var(--text-md); line-height:1.75; margin-bottom:8px; }
.post-article blockquote { border-left:3px solid var(--accent); padding:18px 22px; margin:32px 0; background:var(--surface); border-radius:0 var(--r-md) var(--r-md) 0; font-style:italic; color:var(--text-hi); font-size:1.05rem; line-height:1.7; }
.post-footer { border-top:1px solid var(--border); margin-top:48px; padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.post-tags { display:flex; gap:8px; flex-wrap:wrap; }
.post-pill { padding:4px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); font-size:.72rem; color:var(--text-md); }

/* =========== ANIMATIONS & EFFECTS =========== */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* Ambient Spatial Background Orbs */
.spatial-bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  animation: float 25s infinite alternate ease-in-out;
}
.orb-blue { top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--accent) 0%, transparent 80%); animation-duration: 28s; }
.orb-cyan { bottom: -10%; right: -10%; width: 45vw; height: 45vw; background: radial-gradient(circle, #00d4ff 0%, transparent 80%); animation-duration: 22s; animation-delay: -5s; }
.orb-navy { top: 35%; left: 45%; width: 45vw; height: 45vw; background: radial-gradient(circle, #0c1930 0%, transparent 80%); opacity: 0.22; animation-duration: 32s; animation-delay: -10s; }
.orb-rose { top: 20%; right: 15%; width: 35vw; height: 35vw; background: radial-gradient(circle, rgba(244,63,94,0.3) 0%, transparent 80%); opacity: 0.08; animation-duration: 26s; animation-delay: -15s; }

@keyframes float {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-40px) scale(1.05) rotate(90deg); }
  100% { transform: translateY(20px) scale(0.98) rotate(180deg); }
}

/* Card Lift & Glow Hover overrides */
.service-cell, .value-card, .about-card, .blog-card, .contact-box, .contact-form-card {
  position: relative;
  transition: transform var(--t-slow), border-color var(--t-base), box-shadow var(--t-base) !important;
}
.service-cell:hover, .value-card:hover, .about-card:hover, .blog-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  border-color: rgba(0, 112, 243, 0.4) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.8), 0 0 32px rgba(0, 112, 243, 0.12) !important;
}

/* Shimmer shine text gradient */
.text-gradient-b {
  background: linear-gradient(90deg, #0070f3, #00d4ff, #005dd4, #0070f3);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine 6s linear infinite;
}
@keyframes shine {
  to { background-position: 200% center; }
}

/* =========== MOBILE =========== */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .why-layout { grid-template-columns:1fr; gap:40px; }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .svc-layout { grid-template-columns:1fr; gap:36px; }
  .svc-layout.flip { direction:ltr; }
  .about-story-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .contact-layout { grid-template-columns:1fr; }
  .modal-wrap { grid-template-columns:1fr; }
  .modal-sidebar { border-right:none; border-bottom:1px solid var(--border); }
  .blog-featured { grid-template-columns:1fr; }
  .blog-feat-img { min-height:260px; }
  .blog-feat-body { padding:32px 28px; }
}
@media (max-width:768px) {
  :root { --nav-h:62px; }
  .section { padding:60px 0; }
  .section-header { margin-bottom:40px; }
  .container { padding:0 20px; }
  .nav-links,.nav-cta .btn-secondary { display:none; }
  .nav-cta .btn-sm { display:inline-flex; }
  .nav-toggle { display:flex !important; align-items:center; justify-content:center; z-index: 1100; }
  .hero { padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px; }
  .hero-stats { flex-direction:column; width:100%; max-width:320px; }
  .hero-stat { border-right:none; border-bottom:1px solid var(--border); padding:14px 20px; }
  .hero-stat:last-child { border-bottom:none; }
  .hero-actions { flex-direction:column; align-items:center; }
  .hero-actions .btn { width:100%; max-width:290px; }
  .why-stats { grid-template-columns:1fr 1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .process-grid { grid-template-columns:1fr; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal-wrap { border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:88vh; overflow-y:auto; }
  .modal-body { max-height:none; }
  .cta-actions { flex-direction:column; align-items:center; }
  .cta-actions .btn { width:100%; max-width:290px; }
  .testimonial-card { padding:32px 24px; }
  .metric-pair { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .modal-2col { grid-template-columns:1fr; }
  .service-cell { padding:36px 28px; }
  .contact-form-card { padding:28px 20px; }
}
@media (max-width:480px) {
  .container { padding:0 16px; }
  .section { padding:48px 0; }
  .hero-title { font-size:2.6rem; }
  .blog-feat-title { font-size:1.3rem; }
  .wa-popup { width:270px; }
  .post-heading { font-size:1.9rem; }
  .page-hero-title { font-size:2.1rem; }
  .why-stats { grid-template-columns:1fr; }
}