/* ================================================================
   INNOSATE — Design System & Styles
   Inspired by Cult Polar Starter's nested card aesthetic
   ================================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Colors */
  --bg-black: #000000;
  --bg-body: #09090b;
  --card-bg: #0a0a0a;
  --card-bg-inner: rgba(10, 10, 10, 0.5);
  --card-bg-hover: #111111;
  --border-subtle: #1a1a1e;
  --border-muted: #27272a;

  --text-primary: #fafafa;
  --text-secondary: #e4e4e7;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;

  --accent: #06b6d4;
  --accent-light: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.15);
  --accent-glow-strong: rgba(6, 182, 212, 0.3);

  --gradient-card-from: #0a0a0a;
  --gradient-card-via: rgba(10, 10, 10, 0.95);
  --gradient-card-to: rgba(24, 24, 27, 0.9);

  /* Shadows (nested elevation system) */
  --shadow-elevation-1: 
    0 0 0 1px rgba(255,255,255,0.03),
    0 1px 2px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
  --shadow-elevation-2: 
    0 0 0 1px rgba(255,255,255,0.05),
    0 2px 4px rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.4),
    0 8px 16px rgba(0,0,0,0.3);
  --shadow-elevation-3: 
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 8px rgba(0,0,0,0.5),
    0 8px 16px rgba(0,0,0,0.4),
    0 16px 32px rgba(0,0,0,0.3);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 6px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 48px;
  --gap-2xl: 80px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Container */
  --max-width: 1280px;
}

/* --- Light Mode Overrides --- */
:root[data-theme="light"] {
  --bg-black: #f8f8f8;
  --bg-body: #f1f1f3;
  --card-bg: #ffffff;
  --card-bg-inner: rgba(255, 255, 255, 0.8);
  --card-bg-hover: #f4f4f5;
  --border-subtle: #e4e4e7;
  --border-muted: #d4d4d8;

  --text-primary: #09090b;
  --text-secondary: #18181b;
  --text-muted: #3f3f46;
  --text-dim: #71717a;

  --accent: #0891b2;
  --accent-light: #06b6d4;
  --accent-glow: rgba(8, 145, 178, 0.1);
  --accent-glow-strong: rgba(8, 145, 178, 0.25);

  --gradient-card-from: #ffffff;
  --gradient-card-via: rgba(244, 244, 245, 0.95);
  --gradient-card-to: rgba(228, 228, 231, 0.9);

  --shadow-elevation-1:
    0 0 0 1px rgba(0,0,0,0.04),
    0 1px 2px rgba(0,0,0,0.06),
    0 2px 4px rgba(0,0,0,0.04);
  --shadow-elevation-2:
    0 0 0 1px rgba(0,0,0,0.05),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.05),
    0 8px 16px rgba(0,0,0,0.03);
  --shadow-elevation-3:
    0 0 0 1px rgba(0,0,0,0.06),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.05),
    0 16px 32px rgba(0,0,0,0.04);
}

/* Smooth color transitions for entire page when switching theme */
*:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon):not(rect),
*:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon):not(rect)::before,
*:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon):not(rect)::after {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

/* --- Theme Toggle Button --- */
.btn-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn-theme-toggle:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.btn-theme-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Dark mode: show ☀ sun (to switch to light), hide 🌙 moon */
.btn-theme-toggle .icon-moon { display: none !important; }
.btn-theme-toggle .icon-sun  { display: block !important; }

/* Light mode: show 🌙 moon (to switch to dark), hide ☀ sun */
:root[data-theme="light"] .btn-theme-toggle .icon-sun  { display: none !important; }
:root[data-theme="light"] .btn-theme-toggle .icon-moon { display: block !important; }

/* Light mode: make button visible on light bg */
:root[data-theme="light"] .btn-theme-toggle {
  background: rgba(0,0,0,0.05);
  border-color: var(--border-muted);
  color: var(--text-muted);
}
:root[data-theme="light"] .btn-theme-toggle:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

/* Mobile toggle in mobile nav */
.mobile-theme-toggle {
  display: inline-flex;
  width: auto;
  padding: 10px 18px;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  align-self: flex-start;
  margin-bottom: 4px;
  border-radius: 0;
}

.mobile-theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* Light mode specific overrides for elements using hardcoded dark values */

/* ── Base ── */
:root[data-theme="light"] body {
  background: var(--bg-body);
}

/* ── All gradient-text headings: reset to solid dark color ── */
:root[data-theme="light"] .hero-heading .line-1,
:root[data-theme="light"] .hero-heading .line-2,
:root[data-theme="light"] .partner-text-inner h2,
:root[data-theme="light"] .partner-text-inner h2 .muted,
:root[data-theme="light"] .services-heading h2,
:root[data-theme="light"] .portfolio-header-inner h2,
:root[data-theme="light"] .portfolio-header-inner p,
:root[data-theme="light"] .testimonial-inner .section-label,
:root[data-theme="light"] .testimonial-header h2,
:root[data-theme="light"] .faq-header h2,
:root[data-theme="light"] .local-biz-hero-inner h2,
:root[data-theme="light"] .local-biz-serve-inner h3,
:root[data-theme="light"] .tech-stack-header h3,
:root[data-theme="light"] .footer-cta-inner h2 {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--text-primary);
  background-clip: unset;
  color: var(--text-primary);
}

:root[data-theme="light"] .local-biz-hero-inner h2 .accent-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .partner-text-inner h2 .muted {
  -webkit-text-fill-color: var(--text-dim);
  color: var(--text-dim);
}

/* ── Header ── */
:root[data-theme="light"] .header-outer {
  background: linear-gradient(135deg, #fff, #f4f4f5, #e8e8eb);
}
:root[data-theme="light"] .header-inner {
  background: rgba(255,255,255,0.95);
}

/* ── Nav ── */
:root[data-theme="light"] .nav-desktop a {
  color: var(--text-muted);
}
:root[data-theme="light"] .nav-desktop a:hover {
  color: var(--text-primary);
}
:root[data-theme="light"] .btn-header {
  background: rgba(0,0,0,0.04);
  border-color: var(--border-muted);
  color: var(--text-primary);
}
:root[data-theme="light"] .btn-header:hover {
  background: rgba(0,0,0,0.08);
}

/* ── Mobile Nav ── */
:root[data-theme="light"] .mobile-nav {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
}
:root[data-theme="light"] .mobile-nav a {
  color: var(--text-muted);
}

/* ── Hero ── */
:root[data-theme="light"] .hero-text-card {
  background: linear-gradient(135deg, #fff, #f4f4f5, #e8e8eb);
}
:root[data-theme="light"] .hero-text-inner {
  background: rgba(255,255,255,0.6);
}
:root[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}
:root[data-theme="light"] .btn-primary {
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
}
:root[data-theme="light"] .btn-primary:hover {
  background: rgba(0,0,0,0.09);
}
:root[data-theme="light"] .btn-secondary {
  background: rgba(0,0,0,0.03);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* ── Showcase ── */
:root[data-theme="light"] .showcase-inner {
  background: rgba(240,240,242,0.6);
}

/* ── Partner section ── */
:root[data-theme="light"] .partner-text-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .partner-logos-inner {
  background: rgba(255,255,255,0.7);
}

/* ── Services ── */
:root[data-theme="light"] .services-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .service-item-title {
  color: var(--text-primary);
}
:root[data-theme="light"] .service-item-desc {
  color: var(--text-muted);
}
:root[data-theme="light"] .preview-sidebar-inner {
  background: rgba(255,255,255,0.7);
}

/* ── Portfolio ── */
:root[data-theme="light"] .portfolio-header-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .portfolio-header-inner h2 {
  color: var(--text-primary);
}
:root[data-theme="light"] .portfolio-header-inner p {
  color: var(--text-muted);
}
:root[data-theme="light"] .filter-btn {
  background: rgba(0,0,0,0.04);
  border-color: var(--border-muted);
  color: var(--text-muted);
}
:root[data-theme="light"] .filter-btn:hover {
  background: rgba(0,0,0,0.07);
  color: var(--text-primary);
}
:root[data-theme="light"] .portfolio-item-info {
  background: #ffffff;
}
:root[data-theme="light"] .portfolio-item-info h3 {
  color: var(--text-primary);
}
:root[data-theme="light"] .portfolio-item-info p {
  color: var(--text-muted);
}

/* ── Testimonials ── */
:root[data-theme="light"] .testimonial-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .testimonial-header h2 {
  color: var(--text-primary);
}
:root[data-theme="light"] .testimonial-card-text {
  color: var(--text-muted);
}
:root[data-theme="light"] .testimonial-avatar {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent-glow-strong);
}

/* ── FAQ ── */
:root[data-theme="light"] .faq-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .faq-item {
  border-color: var(--border-subtle);
}
:root[data-theme="light"] .faq-question {
  color: var(--text-primary);
}
:root[data-theme="light"] .faq-answer {
  color: var(--text-muted);
}

/* ── Local Business section ── */
:root[data-theme="light"] .local-biz-hero-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .local-biz-hero-desc {
  color: var(--text-muted);
}
:root[data-theme="light"] .local-biz-card-inner {
  background: #fff;
}
:root[data-theme="light"] .local-biz-card-desc {
  color: var(--text-muted);
}
:root[data-theme="light"] .local-biz-card-inner h3 {
  color: var(--text-primary);
}
:root[data-theme="light"] .local-biz-serve-inner {
  background: rgba(255,255,255,0.5);
}
:root[data-theme="light"] .local-biz-serve-subtitle {
  color: var(--text-muted);
}
:root[data-theme="light"] .local-biz-serve-item {
  background: rgba(255,255,255,0.8);
  border-color: var(--border-subtle);
}
:root[data-theme="light"] .local-biz-serve-item span {
  color: var(--text-secondary);
}
:root[data-theme="light"] .local-biz-features li {
  color: var(--text-muted);
}
:root[data-theme="light"] .local-biz-highlight-item {
  background: rgba(255,255,255,0.8);
  border-color: var(--border-muted);
  color: var(--text-secondary);
}
:root[data-theme="light"] .local-biz-tag {
  background: rgba(0,0,0,0.04);
  border-color: var(--border-muted);
  color: var(--text-muted);
}

/* ── Tech stack ── */
:root[data-theme="light"] .tech-stack-showcase {
  background: var(--bg-body);
  border-color: var(--border-subtle);
}
:root[data-theme="light"] .tech-stack-header p {
  color: var(--text-muted);
}
:root[data-theme="light"] .tech-logo-card {
  background: rgba(255,255,255,0.8);
  border-color: var(--border-subtle);
}
:root[data-theme="light"] .tech-logo-card:hover {
  background: #fff;
  border-color: var(--border-muted);
}
:root[data-theme="light"] .tech-logo-icon {
  background: rgba(0,0,0,0.04);
  color: var(--text-muted);
}
:root[data-theme="light"] .tech-logo-card span {
  color: var(--text-muted);
}

/* ── Footer ── */
:root[data-theme="light"] .footer-cta-outer {
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
}
:root[data-theme="light"] .footer-cta-inner {
  background: rgba(255,255,255,0.6);
}
:root[data-theme="light"] .footer-cta-inner h2 {
  color: var(--text-primary);
}
:root[data-theme="light"] .footer-cta-inner p {
  color: var(--text-muted);
}
:root[data-theme="light"] .btn-footer-cta {
  background: var(--accent);
  color: #fff;
  border: none;
}
:root[data-theme="light"] .btn-footer-cta:hover {
  background: var(--accent-light);
}
:root[data-theme="light"] .site-footer-main {
  background: #f4f4f5;
  border-top: 1px solid var(--border-subtle);
}
:root[data-theme="light"] .footer-heading {
  color: var(--text-primary);
}
:root[data-theme="light"] .footer-grid a,
:root[data-theme="light"] .footer-bottom {
  color: var(--text-muted);
}

/* ── Modals ── */
:root[data-theme="light"] .portfolio-modal,
:root[data-theme="light"] .contact-modal {
  background: rgba(0,0,0,0.45);
}
:root[data-theme="light"] .contact-form-group input,
:root[data-theme="light"] .contact-form-group select,
:root[data-theme="light"] .contact-form-group textarea {
  background: rgba(0,0,0,0.03);
  border-color: var(--border-muted);
  color: var(--text-primary);
}
:root[data-theme="light"] .contact-form-group input::placeholder,
:root[data-theme="light"] .contact-form-group textarea::placeholder {
  color: var(--text-dim);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-black);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 72px;
}

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

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

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

ul, ol {
  list-style: none;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap-xs);
}

/* --- Nested Card System (Shadow Elevation) --- */
.card-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.card-inner {
  background: var(--card-bg-inner);
  box-shadow: var(--shadow-elevation-1);
  padding: var(--gap-xs);
}

.card-content {
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 4px;
  pointer-events: none;
}

.header-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
  max-width: var(--max-width);
  margin: 0 auto;
  pointer-events: auto;
}

.header-inner {
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  padding: var(--gap-xs);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  position: relative;
  transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
  transform: scale(1.1) rotate(6deg);
}

.logo-icon-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevation-1);
}

.logo-icon-inner > div {
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon-inner > div > div {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent-glow-strong), var(--accent));
  padding: 2px;
  box-shadow: var(--shadow-elevation-1);
}

.logo-icon-inner > div > div > div {
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  padding: 2px;
}

.logo-icon-inner > div > div > div > div {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  transition: background 0.3s ease;
}

.logo-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 24px;
}

.nav-desktop a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
  padding: 4px 0;
}

.nav-desktop a:hover {
  color: var(--text-primary);
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-desktop a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-header {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-muted);
  box-shadow: var(--shadow-elevation-1);
  transition: all 0.2s ease;
}

.btn-header:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--text-dim);
}

.btn-header svg {
  width: 14px;
  height: 14px;
}

/* Mobile menu button */
.btn-mobile-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.btn-mobile-menu:hover {
  color: var(--text-primary);
}

.btn-mobile-menu svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.mobile-nav.active {
  display: flex;
}

.mobile-nav a {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.mobile-nav a:hover {
  color: var(--accent);
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 28px;
}

/* --- Hero Section --- */
.hero-section {
  padding-top: var(--gap-xs);
}

.hero-outer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* Two-column split (Cult Polar style) */
.hero-outer-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
}

@media (min-width: 768px) {
  .hero-outer-split {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* --- Hero Image Card (right panel) --- */
.hero-image-card {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-3);
  padding: var(--gap-xs);
  min-height: 340px;
}

@media (min-width: 768px) {
  .hero-image-card {
    min-height: 480px;
  }
}

.hero-image-inner {
  background: var(--card-bg-inner);
  box-shadow: var(--shadow-elevation-1);
  padding: var(--gap-xs);
  height: 100%;
}

.hero-image-wrapper {
  position: relative;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}

.hero-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s ease;
}

.hero-image-wrapper:hover .hero-showcase-img {
  transform: scale(1.04);
}

/* Gradient fade at bottom of image */
.hero-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Floating badge */
.hero-image-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: badgePulse 2s infinite;
  flex-shrink: 0;
}

@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Bottom stat chips */
.hero-image-stats {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(6,182,212,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(6,182,212,0.35);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.hero-stat-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.hero-text-card {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.hero-text-inner {
  background: var(--card-bg-inner);
  box-shadow: var(--shadow-elevation-1);
  padding: 6px;
  position: relative;
  overflow: hidden;
}

/* GLSL Hills wrapper — stretches inner to hold canvas */
.hero-glsl-wrapper {
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}

/* CSS fallback background — visible when GLSL canvas fails to load */
.hero-glsl-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(6,182,212,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 30% 60%, rgba(99,102,241,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 70% 55%, rgba(139,92,246,0.08) 0%, transparent 50%),
    linear-gradient(180deg, transparent 0%, var(--card-bg) 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: heroFallbackShift 12s ease-in-out infinite alternate;
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* Hide fallback once GLSL successfully initializes */
.hero-glsl-wrapper.glsl-active::before {
  opacity: 0;
  pointer-events: none;
}

@keyframes heroFallbackShift {
  0%   { background-position: 0% 50%, 100% 50%, 50% 0%, 0% 0%; }
  50%  { background-position: 100% 30%, 0% 70%, 80% 100%, 0% 0%; }
  100% { background-position: 50% 80%, 60% 20%, 20% 50%, 0% 0%; }
}

/* Canvas fills the card behind everything */
#hero-glsl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  display: block;
}

/* Bottom gradient fade so canvas blends into card bg */
.hero-glsl-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--card-bg));
  z-index: 2;
  pointer-events: none;
}

.hero-text-content {
  padding: 80px 24px;
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  overflow: visible;
}

.hero-welcome {
  font-size: 12px;
  color: var(--text-dim);
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-heading {
  font-family: var(--font-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  word-break: keep-all;
  overflow-wrap: normal;
}

.hero-heading .line {
  display: block;
  white-space: nowrap;
}

.hero-heading .line-1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-heading .line-2 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Letter hover animation */
.hero-heading .char {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.hero-heading .char:hover {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  transform: translateY(-4px) scale(1.05);
  text-shadow: 0 0 30px var(--accent-glow-strong);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  color: var(--text-secondary);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 560px;
  margin: 0 auto 36px;
  text-align: center;
}

.hero-cta-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow-elevation-2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-glow), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-secondary {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.02);
  box-shadow: var(--shadow-elevation-1);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.06);
}

/* --- Showcase Image Section --- */
.showcase-section {
  padding-top: var(--gap-xs);
}

.showcase-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-3);
  padding: var(--gap-xs);
}

.showcase-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-2);
  padding: 6px;
  position: relative;
  overflow: hidden;
}

.showcase-img-wrapper {
  position: relative;
  overflow: hidden;
}

.showcase-img-wrapper img {
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-elevation-1);
  transform: scale(1.008);
  transition: transform 0.6s ease;
}

.showcase-img-wrapper:hover img {
  transform: scale(1.02);
}

/* Blur fade at bottom */
.showcase-blur-overlay {
  position: absolute;
  bottom: 2px;
  left: 4px;
  height: 55%;
  width: calc(100% - 8px);
  pointer-events: none;
}

.showcase-blur-overlay > div {
  position: absolute;
  inset: 0;
}

.blur-layer-1 { backdrop-filter: blur(0px); mask-image: linear-gradient(180deg, transparent 0%, white 11%, white 22%, transparent 33%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, white 11%, white 22%, transparent 33%); }
.blur-layer-2 { backdrop-filter: blur(0.2px); mask-image: linear-gradient(180deg, transparent 11%, white 22%, white 33%, transparent 44%); -webkit-mask-image: linear-gradient(180deg, transparent 11%, white 22%, white 33%, transparent 44%); }
.blur-layer-3 { backdrop-filter: blur(0.4px); mask-image: linear-gradient(180deg, transparent 22%, white 33%, white 44%, transparent 55%); -webkit-mask-image: linear-gradient(180deg, transparent 22%, white 33%, white 44%, transparent 55%); }
.blur-layer-4 { backdrop-filter: blur(0.6px); mask-image: linear-gradient(180deg, transparent 33%, white 44%, white 55%, transparent 66%); -webkit-mask-image: linear-gradient(180deg, transparent 33%, white 44%, white 55%, transparent 66%); }
.blur-layer-5 { backdrop-filter: blur(0.8px); mask-image: linear-gradient(180deg, transparent 44%, white 55%, white 66%, transparent 77%); -webkit-mask-image: linear-gradient(180deg, transparent 44%, white 55%, white 66%, transparent 77%); }
.blur-layer-6 { backdrop-filter: blur(1px); mask-image: linear-gradient(180deg, transparent 55%, white 66%, white 77%, transparent 88%); -webkit-mask-image: linear-gradient(180deg, transparent 55%, white 66%, white 77%, transparent 88%); }
.blur-layer-7 { backdrop-filter: blur(1.2px); mask-image: linear-gradient(180deg, transparent 66%, white 77%, white 88%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 66%, white 77%, white 88%, transparent 100%); }
.blur-layer-8 { backdrop-filter: blur(1.4px); mask-image: linear-gradient(180deg, transparent 77%, white 88%, white 100%, transparent 111%); -webkit-mask-image: linear-gradient(180deg, transparent 77%, white 88%, white 100%, transparent 111%); }

.showcase-text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 16px 20px;
  z-index: 5;
}

.showcase-text-overlay h3 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}

.showcase-text-overlay p {
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
}

/* --- Partners / Clients Section --- */
.partners-section {
  padding-top: var(--gap-xs);
}

.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
}

.partner-text-card {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.partner-text-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 24px;
}

.partner-text-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.partner-text-inner h2 .muted {
  background: linear-gradient(to top, var(--text-muted), rgba(161,161,170,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.partner-logos-card {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.partner-logos-inner {
  background: var(--card-bg-inner);
  box-shadow: var(--shadow-elevation-1);
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 120px;
}

.partner-logo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevation-1);
}

.partner-logo:hover {
  color: var(--accent);
  border-color: var(--accent-glow-strong);
}

/* --- Services / Features Section --- */
.services-section {
  padding-top: var(--gap-xs);
}

.services-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.services-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 24px 16px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.services-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 32px;
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.service-item:hover {
  transform: translateX(4px);
}

.service-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.05);
  box-shadow: var(--shadow-elevation-1);
  position: relative;
}

.service-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 182, 212, 0.03);
  box-shadow: var(--shadow-elevation-1);
}

.service-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  position: relative;
  z-index: 1;
}

.service-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.service-item:hover .service-info h3 {
  color: var(--accent);
}

.service-info p {
  font-size: 13px;
  color: rgba(250,250,250,0.7);
  line-height: 1.5;
}

/* Services preview panel */
.services-preview {
  position: relative;
}

.services-preview-card {
  background: var(--bg-body);
  box-shadow: var(--shadow-elevation-2);
  padding: 12px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  color: var(--accent);
}

.preview-logo svg {
  width: 18px;
  height: 18px;
}

.preview-header-left span {
  font-weight: 600;
  font-size: 14px;
}

.preview-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 4px 12px;
  gap: 8px;
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.preview-search svg {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
}

.preview-search span {
  font-size: 13px;
  color: var(--text-dim);
}

.preview-body {
  display: flex;
  height: 445px;
}

.preview-sidebar {
  display: none;
  width: 33%;
  border-right: 1px solid var(--border-subtle);
  padding: 10px 12px;
  overflow-y: auto;
  height: 100%;
}

.preview-sidebar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.preview-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 2px 4px;
  color: var(--text-muted);
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 0px;
}

.preview-sidebar-item:hover {
  background: rgba(255,255,255,0.03);
}

.preview-sidebar-item.active {
  color: var(--accent);
  font-weight: 500;
  background: var(--accent-glow);
}

.preview-sidebar-item svg {
  width: 14px;
  height: 14px;
}

.sidebar-projects {
  margin-top: 10px;
}

.project-badge {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 8px;
  font-weight: 600;
}

.preview-main {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.preview-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.preview-main-header h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
}

.preview-card-item {
  border: 1px solid var(--border-subtle);
  padding: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.preview-card-item:hover {
  border-color: var(--accent-glow-strong);
}

.preview-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-dot.green { background: #22c55e; }
.status-dot.amber { background: #f59e0b; }
.status-dot.blue { background: var(--accent); }

.preview-card-top span {
  font-size: 12px;
  font-weight: 500;
}

.preview-card-top .tag {
  font-size: 10px;
  color: var(--text-dim);
}

.preview-card-meta {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-card-meta .label {
  font-weight: 600;
}

/* --- Testimonial Section --- */
.testimonial-section {
  padding-top: var(--gap-xs);
}

.testimonial-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.testimonial-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 48px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.testimonial-content {
  max-width: 720px;
  text-align: center;
  cursor: pointer;
}

.testimonial-quote {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--text-dim);
  transition: color 0.6s ease;
}

.testimonial-quote:hover {
  color: var(--text-primary);
}

.testimonial-author {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

.testimonial-author strong {
  color: var(--text-muted);
}

/* Testimonials Grid */
.testimonials-grid-section {
  padding-top: var(--gap-xs);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
}

.testimonial-card-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
  transition: transform 0.3s ease;
}

.testimonial-card-outer:hover {
  transform: translateY(-2px);
}

.testimonial-card-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 24px;
}

.testimonial-card-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.testimonial-card-stars svg {
  width: 14px;
  height: 14px;
  color: #f59e0b;
  fill: #f59e0b;
}

.testimonial-card-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.testimonial-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent-glow-strong), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
}

.testimonial-card-author-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.testimonial-card-author-info p {
  font-size: 11px;
  color: var(--text-dim);
}

/* --- Local Business Section --- */
.local-biz-section {
  padding-top: var(--gap-xs);
}

.local-biz-hero-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
  margin-bottom: var(--gap-xs);
}

.local-biz-hero-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 48px 16px;
  text-align: center;
}

.local-biz-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-glow-strong);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.local-biz-hero-badge svg {
  width: 16px;
  height: 16px;
}

.local-biz-hero-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.local-biz-hero-inner h2 .accent-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.local-biz-hero-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 32px;
}

.local-biz-hero-desc strong {
  color: var(--text-primary);
}

.local-biz-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.local-biz-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevation-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.local-biz-highlight-item:hover {
  border-color: var(--accent-glow-strong);
  color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-2px);
}

.local-biz-highlight-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* Service Cards Grid */
.local-biz-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-xs);
}

.local-biz-card-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
  transition: transform 0.3s ease;
}

.local-biz-card-outer:hover {
  transform: translateY(-4px);
}

.local-biz-card-inner {
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.local-biz-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.local-biz-card-icon svg {
  width: 28px;
  height: 28px;
}

.local-biz-card-inner h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.local-biz-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.local-biz-perfect-for {
  margin-bottom: 16px;
}

.local-biz-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 8px;
}

.local-biz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.local-biz-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  transition: all 0.2s ease;
}

.local-biz-tag:hover {
  color: var(--accent);
  border-color: var(--accent-glow-strong);
  background: var(--accent-glow);
}

.local-biz-features {
  flex: 1;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.local-biz-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0;
}

.local-biz-features li svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Who We Serve */
.local-biz-serve-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.local-biz-serve-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 48px 16px;
  text-align: center;
}

.local-biz-serve-inner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.local-biz-serve-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 32px;
}

.local-biz-serve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 800px;
  margin: 0 auto 32px;
}

.local-biz-serve-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevation-1);
  transition: all 0.3s ease;
  cursor: default;
}

.local-biz-serve-item:hover {
  border-color: var(--accent-glow-strong);
  background: var(--accent-glow);
  transform: translateY(-2px);
}

.local-biz-serve-item svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.local-biz-serve-item:hover svg {
  transform: scale(1.15);
}

.local-biz-serve-item span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.local-biz-serve-item:hover span {
  color: var(--text-primary);
}

.local-biz-cta-row {
  text-align: center;
}

.btn-local-biz-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  background: var(--accent);
  box-shadow: var(--shadow-elevation-2);
  transition: all 0.3s ease;
}

.btn-local-biz-cta:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}

.btn-local-biz-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-local-biz-cta:hover svg {
  transform: translateX(4px);
}

/* Nav Highlight — boxed background for the Local Business link */
.nav-desktop a.nav-highlight {
  color: var(--accent);
  font-weight: 600;
  position: relative;
  padding: 6px 14px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-glow-strong);
  box-shadow: 0 0 12px var(--accent-glow), var(--shadow-elevation-1);
  transition: all 0.3s ease;
}

.nav-desktop a.nav-highlight::after {
  display: none;
}

.nav-desktop a.nav-highlight:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow-strong), var(--shadow-elevation-1);
  color: var(--accent-light);
}

.mobile-nav a.nav-highlight {
  color: var(--accent) !important;
  font-weight: 600;
  padding: 8px 20px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-glow-strong);
}

/* --- FAQ Section --- */
.faq-section {
  padding-top: var(--gap-xs);
}

.faq-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.faq-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 48px 16px;
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--accent);
}

.faq-question svg {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.active .faq-question svg {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 20px;
}

.faq-answer p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* --- Footer --- */
.site-footer {
  padding-top: var(--gap-xs);
  padding-bottom: var(--gap-xs);
}

.footer-cta-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
  margin-bottom: var(--gap-xs);
}

.footer-cta-inner {
  background: rgba(10,10,10,0.2);
  box-shadow: var(--shadow-elevation-1);
  padding: 64px 16px;
  text-align: center;
}

.footer-cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.footer-cta-inner p {
  font-size: 16px;
  color: var(--text-dim);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.btn-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  background: var(--accent);
  box-shadow: var(--shadow-elevation-2);
  transition: all 0.3s ease;
}

.btn-footer-cta:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}

.btn-footer-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-footer-cta:hover svg {
  transform: translateX(4px);
}

.footer-main-outer {
  background: linear-gradient(135deg, var(--gradient-card-from), var(--gradient-card-via), var(--gradient-card-to));
  box-shadow: var(--shadow-elevation-2);
  padding: var(--gap-xs);
}

.footer-main-inner {
  background: var(--card-bg);
  box-shadow: var(--shadow-elevation-1);
  padding: 48px 24px 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-brand p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 300px;
  margin-top: 12px;
}

.footer-links h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-links a {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  padding: 4px 0;
  transition: color 0.2s ease;
}

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

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom p {
  font-size: 12px;
  color: var(--text-dim);
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  color: var(--accent);
  border-color: var(--accent-glow-strong);
  background: var(--accent-glow);
}

.footer-socials svg {
  width: 16px;
  height: 16px;
}

/* --- Portfolio Interactive Section --- */
.portfolio-interactive {
  padding: 48px 16px 24px;
}

.portfolio-header {
  text-align: center;
  margin-bottom: 32px;
}

.portfolio-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  background: linear-gradient(to top, var(--text-primary), rgba(250,250,250,0.95));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.portfolio-header p {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 540px;
  margin: 0 auto;
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.filter-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevation-1);
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-color: var(--border-muted);
}

.filter-btn.active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent-glow-strong);
  box-shadow: 0 0 12px var(--accent-glow);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.portfolio-item {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-item.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.portfolio-item-img-placeholder {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-item-img-placeholder {
  transform: scale(1.02);
}

.portfolio-item-img-placeholder svg {
  width: 48px;
  height: 48px;
  color: rgba(255,255,255,0.15);
  transition: color 0.3s ease, transform 0.3s ease;
}

.portfolio-item:hover .portfolio-item-img-placeholder svg {
  color: var(--accent);
  transform: scale(1.1);
}

.portfolio-item-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
}

.portfolio-item-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}

.portfolio-item-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.portfolio-item-info p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.btn-project-detail {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-project-detail:hover {
  color: var(--accent-light);
  transform: translateX(2px);
}

/* --- Portfolio Modal --- */
.portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.portfolio-modal.active {
  display: flex;
}

.portfolio-modal-outer {
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow-elevation-3);
}

.portfolio-modal-content {
  position: relative;
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
}

.portfolio-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color 0.2s ease;
}

.portfolio-modal-close:hover {
  color: var(--text-primary);
}

.modal-header-hero {
  height: 200px;
  margin: -24px -24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.modal-header-hero svg {
  width: 56px;
  height: 56px;
  color: rgba(255,255,255,0.25);
}

.modal-project-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

.modal-body-title h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.modal-body-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 0;
  margin-bottom: 16px;
}

.modal-meta-item span {
  display: block;
}

.modal-meta-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.modal-meta-val {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.modal-body-desc h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
}

.modal-body-desc p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.modal-features-list {
  margin-bottom: 16px;
}

.modal-features-list li {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.modal-features-list li svg {
  width: 14px;
  height: 14px;
  color: #22c55e;
  min-width: 14px;
}

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: rgba(255,255,255,0.01);
  border: 1px solid var(--border-subtle);
  padding: 12px;
}

.modal-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.modal-stat-label {
  font-size: 10px;
  color: var(--text-dim);
}


/* --- Scroll Animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }

/* --- Responsive --- */
@media (min-width: 640px) {
  .hero-cta-row {
    flex-direction: row;
    gap: 16px;
  }

  .btn-secondary {
    display: inline-flex;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .local-biz-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .nav-desktop {
    display: flex;
  }

  .btn-header {
    display: inline-flex;
  }

  .btn-mobile-menu {
    display: none;
  }

  .hero-text-content {
    padding: 80px 32px 48px;
  }

  .hero-welcome {
    display: block;
  }

  .hero-subtitle {
    padding-bottom: 32px;
  }

  .partners-grid {
    grid-template-columns: 2fr 1fr;
  }

  .services-inner {
    padding: 48px 24px;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .service-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }

  .service-icon svg {
    width: 24px;
    height: 24px;
  }

  .preview-sidebar {
    display: block;
  }

  .testimonial-inner {
    padding: 80px 32px;
  }

  .faq-inner {
    padding: 64px 32px;
  }
}

@media (min-width: 1024px) {
  .local-biz-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .local-biz-serve-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .hero-text-content {
    padding: 144px 32px 48px;
  }
}

@media (min-width: 1280px) {
  .hero-heading .line-1 {
    font-size: 8rem;
  }

  .hero-heading .line-2 {
    font-size: 7rem;
  }
}

/* --- Tech Stack & Tools Showcase Grid --- */
.tech-stack-showcase {
  padding: 48px 24px;
  background: var(--bg-black);
  border-bottom: 1px solid var(--border-subtle);
}

.tech-stack-header {
  text-align: center;
  margin-bottom: 40px;
}

.tech-stack-header h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.tech-stack-header p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 480px) {
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .tech-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.tech-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.tech-logo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-logo-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-muted);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
}

.tech-logo-card:hover::before {
  opacity: 1;
}

.tech-logo-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--text-muted);
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.tech-logo-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.tech-logo-card:hover .tech-logo-icon svg {
  transform: scale(1.1);
}

.tech-logo-card span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.3s ease;
}

.tech-logo-card:hover span {
  color: var(--text-primary);
}

/* Color Accent Variations for Hover States */
.tech-logo-card:hover .tech-logo-icon.ai { color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.tech-logo-card:hover .tech-logo-icon.html { color: #f97316; background: rgba(249, 115, 22, 0.1); }
.tech-logo-card:hover .tech-logo-icon.js { color: #eab308; background: rgba(234, 179, 8, 0.1); }
.tech-logo-card:hover .tech-logo-icon.php { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
.tech-logo-card:hover .tech-logo-icon.angular { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.tech-logo-card:hover .tech-logo-icon.react { color: #06b6d4; background: rgba(6, 182, 212, 0.1); }
.tech-logo-card:hover .tech-logo-icon.flutter { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.tech-logo-card:hover .tech-logo-icon.maps { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.tech-logo-card:hover .tech-logo-icon.g360 { color: #ec4899; background: rgba(236, 72, 153, 0.1); }
.tech-logo-card:hover .tech-logo-icon.cms { color: #06b6d4; background: rgba(6, 182, 212, 0.1); }
.tech-logo-card:hover .tech-logo-icon.maya { color: #0ea5e9; background: rgba(14, 165, 233, 0.1); }
.tech-logo-card:hover .tech-logo-icon.blender { color: #f97316; background: rgba(249, 115, 22, 0.1); }
.tech-logo-card:hover .tech-logo-icon.max { color: #84cc16; background: rgba(132, 204, 22, 0.1); }
.tech-logo-card:hover .tech-logo-icon.unreal { color: #a1a1aa; background: rgba(161, 161, 170, 0.1); }
.tech-logo-card:hover .tech-logo-icon.unity { color: #fafafa; background: rgba(250, 250, 250, 0.1); }
.tech-logo-card:hover .tech-logo-icon.twinmotion { color: #10b981; background: rgba(16, 185, 129, 0.1); }

/* --- Contact Form Modal --- */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.contact-modal.active {
  display: flex;
}

.contact-modal-outer {
  width: 100%;
  max-width: 600px;
  box-shadow: var(--shadow-elevation-3);
  animation: contactModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contactModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.contact-modal-content {
  position: relative;
  padding: 32px 24px;
  max-height: 90vh;
  overflow-y: auto;
}

.contact-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal-close:hover {
  color: var(--text-primary);
}

/* Header */
.contact-modal-header {
  text-align: center;
  margin-bottom: 28px;
}

.contact-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  border: 1px solid var(--accent-glow-strong);
}

.contact-modal-icon svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.contact-modal-header h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.contact-modal-header p {
  font-size: 14px;
  color: var(--text-dim);
}

/* Form Grid */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.contact-form-group label .required {
  color: var(--accent);
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-muted);
  box-shadow: var(--shadow-elevation-1);
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
  color: var(--text-dim);
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-elevation-1);
  background: rgba(6, 182, 212, 0.03);
}

.contact-form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.contact-form-group select option {
  background: var(--card-bg);
  color: var(--text-primary);
}

.contact-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Submit Button */
.btn-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: #000;
  background: var(--accent);
  border: none;
  box-shadow: var(--shadow-elevation-2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-contact-submit:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}

.btn-contact-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-contact-submit svg:not(.spinner) {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-contact-submit:hover svg:not(.spinner) {
  transform: translateX(4px);
}

.btn-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-submit-loading .spinner {
  width: 18px;
  height: 18px;
}

/* Success State */
.contact-modal-success {
  text-align: center;
  padding: 32px 16px;
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  animation: successPulse 1s ease;
}

@keyframes successPulse {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.success-icon svg {
  width: 32px;
  height: 32px;
  color: #22c55e;
}

.contact-modal-success h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.contact-modal-success p {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.btn-contact-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-muted);
  box-shadow: var(--shadow-elevation-1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-contact-done:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-glow-strong);
}

/* Responsive: 2-col form grid */
@media (min-width: 480px) {
  .contact-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-group.full-width {
    grid-column: span 2;
  }
}

/* ── Footer NAP (Name Address Phone) — Local SEO Citation ── */
.footer-nap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-style: normal;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.footer-nap-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.footer-nap span,
.footer-nap a {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nap a:hover {
  color: var(--accent);
}

:root[data-theme="light"] .footer-nap span,
:root[data-theme="light"] .footer-nap a {
  color: var(--text-muted);
}

:root[data-theme="light"] .footer-nap a:hover {
  color: var(--accent);
}