.elementor-kit-210{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-210 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================================
   QodeHive — Site Settings → Custom CSS  (v4)
   Paste into: WP Admin → Elementor → Site Settings → Custom CSS
   ============================================================================
   This file ONLY defines bespoke qh-* classes used inside HTML widgets
   (hero stage, work cards, testimonials, CTA band, sticky header behaviour).
   Native Elementor widgets (heading, icon-box, counter, button, nav-menu,
   icon-list, social-icons, form) style themselves in the JSON — no specificity
   wars, no !important, no fragile overrides.
   ============================================================================ */

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

/* ---------- Brand tokens ---------- */
:root {
  --qh-bg:        #0D1117;
  --qh-bg-2:      #080B10;
  --qh-bg-3:      #111620;
  --qh-surface:   #0F141C;
  --qh-accent:    #F59E0B;
  --qh-accent-2:  #FB923C;
  --qh-accent-3:  #FBBF24;
  --qh-border:    rgba(255,255,255,0.08);
  --qh-text:      #E5E7EB;
  --qh-dim:       #9CA3AF;
  --qh-muted:     #6B7280;
}

/* Elementor global tokens → QH brand */
:root, body, .elementor-kit-default, [class*="elementor-kit-"] {
  --e-global-color-primary:   #F59E0B;
  --e-global-color-secondary: #FB923C;
  --e-global-color-text:      #E5E7EB;
  --e-global-color-accent:    #FBBF24;
}

/* ---------- Body baseline ---------- */
html { scroll-behavior: smooth; }
body, body.elementor-page {
  background: #0D1117 !important;
  color: #E5E7EB;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.elementor-page { padding-top: 70px; }

/* ════════════════════════════════════════════════════════════════════════
   HEADER — sticky / scrolled blur
   ════════════════════════════════════════════════════════════════════════ */
.qh-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.qh-header.qh-scrolled {
  background-color: rgba(13,17,23,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER — bottom row (uses HTML in text-editor, so style here)
   ════════════════════════════════════════════════════════════════════════ */
.qh-footer-bottom-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: #6B7280;
}
.qh-footer-bottom-links { display: inline-flex; gap: 8px; }
.qh-footer-bottom-row a {
  color: #9CA3AF; text-decoration: none; transition: color .2s ease;
}
.qh-footer-bottom-row a:hover { color: #FBBF24; }

/* Honeypot — keep in DOM, hide visually */
.qh-honeypot,
.elementor-field-group.qh-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — badge, CTA buttons, stage with hex / orbits / chips
   ════════════════════════════════════════════════════════════════════════ */
.qh-hero { min-height: 100vh; align-items: center; }

/* Hero badge */
.qh-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 10px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 100px;
  margin-bottom: 28px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; color: #F59E0B;
  letter-spacing: 1.5px;
}
.qh-hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 12px rgba(245,158,11,0.8);
  animation: qh-blink 2s ease-in-out infinite;
}
@keyframes qh-blink { 0%,100%{opacity:1;} 50%{opacity:0.45;} }
.qh-hero-badge-wrap > * { margin-bottom: 0 !important; }

/* Hero CTA buttons (raw HTML buttons, not native button widget) */
.qh-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.qh-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  background: linear-gradient(135deg, #F59E0B 0%, #FB923C 100%);
  color: #0B0F17 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 15px;
  border-radius: 100px;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px rgba(245,158,11,0.25);
}
.qh-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,158,11,0.45);
  color: #0B0F17 !important;
}
.qh-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  background: rgba(255,255,255,0.04);
  color: #E5E7EB !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: 15px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  text-decoration: none !important;
  transition: all .2s ease;
}
.qh-btn-secondary:hover {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.5);
  color: #FBBF24 !important;
}

/* ──── HERO STAGE (right column visual) ──── */
.qh-stage-wrap { display: flex; align-items: center; justify-content: center; }
.qh-stage {
  position: relative;
  width: 100%; max-width: 540px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.qh-stage-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse at center, rgba(245,158,11,0.18) 0%, transparent 60%);
  pointer-events: none;
  animation: qh-glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes qh-glow-pulse { from{opacity:.6;} to{opacity:1;} }

.qh-stage::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: none;
}
.qh-stage-grid {
  position: absolute; inset: 1px;
  border-radius: 32px;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}

.qh-orbit {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%; pointer-events: none;
}
.qh-orbit-1 {
  width: 70%; height: 70%;
  border: 1px dashed rgba(245,158,11,0.25);
  transform: translate(-50%,-50%);
  animation: qh-spin 26s linear infinite;
}
.qh-orbit-2 {
  width: 92%; height: 92%;
  border: 1px dashed rgba(255,255,255,0.07);
  transform: translate(-50%,-50%);
  animation: qh-spin 40s linear infinite reverse;
}
@keyframes qh-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

.qh-hex {
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 210px;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 0 28px rgba(245,158,11,0.45));
  animation: qh-floaty 6s ease-in-out infinite;
  z-index: 2;
}
@keyframes qh-floaty {
  0%,100% { transform: translate(-50%,-50%); }
  50%     { transform: translate(-50%, calc(-50% - 8px)); }
}
.qh-hex svg { width: 100%; height: 100%; display: block; }

.qh-chip {
  position: absolute;
  background: rgba(22,28,40,0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 10px;
  min-width: 165px;
  z-index: 3;
}
.qh-chip-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.qh-chip-wp    { background: rgba(56,189,248,0.18); }
.qh-chip-app   { background: rgba(167,139,250,0.18); }
.qh-chip-bot   { background: rgba(52,211,153,0.18); }
.qh-chip-agent { background: rgba(245,158,11,0.18); }
.qh-chip-title {
  font-size: 13px; font-weight: 700;
  color: #E5E7EB; line-height: 1.2;
}
.qh-chip-meta {
  font-size: 11px; color: #6B7280; margin-top: 2px;
  font-family: 'DM Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.qh-chip-1 { top: 6%;  left: -8%;  animation: qh-c1 5s ease-in-out infinite; }
.qh-chip-2 { top: 22%; right: -8%; animation: qh-c2 6s ease-in-out infinite; }
.qh-chip-3 { bottom: 24%; left: -10%; animation: qh-c3 5.5s ease-in-out infinite; }
.qh-chip-4 { bottom: 4%;  right: -6%;  animation: qh-c4 6.5s ease-in-out infinite; }
@keyframes qh-c1 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes qh-c2 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
@keyframes qh-c3 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
@keyframes qh-c4 { 0%,100%{transform:translateY(0);} 50%{transform:translateY(9px);} }

.qh-stack-tags {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 0 18px;
}
.qh-stack-tags span {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; padding: 5px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px; color: #9CA3AF;
}

/* ════════════════════════════════════════════════════════════════════════
   TRUST BAR
   ════════════════════════════════════════════════════════════════════════ */
.qh-trust {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: wrap; justify-content: center;
}
.qh-trust-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; color: #6B7280;
  white-space: nowrap;
}
.qh-trust-logos {
  display: flex; flex-wrap: wrap; gap: 28px 36px;
  align-items: center;
}
.qh-trust-logos span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #4B5563;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .2s ease;
  cursor: default;
}
.qh-trust-logos span:hover { color: #9CA3AF; }

/* ════════════════════════════════════════════════════════════════════════
   PROCESS — connecting line + numbered steps
   ════════════════════════════════════════════════════════════════════════ */
.qh-process {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
.qh-process-line {
  position: absolute;
  top: 26px; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.3), rgba(245,158,11,0.3), rgba(245,158,11,0.3), transparent);
  z-index: 0;
}
.qh-step { text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.qh-step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #111620;
  border: 1px solid rgba(245,158,11,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 600;
  color: #F59E0B;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 8px #0D1117, 0 4px 12px rgba(245,158,11,0.15);
}
.qh-step-title {
  font-size: 16px; font-weight: 700;
  color: #E5E7EB; margin-bottom: 8px;
}
.qh-step-desc {
  font-size: 13px; color: #9CA3AF; line-height: 1.6;
}
@media (max-width: 900px) {
  .qh-process { grid-template-columns: 1fr 1fr; }
  .qh-process-line { display: none; }
}
@media (max-width: 600px) {
  .qh-process { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   FEATURED WORK CARDS
   ════════════════════════════════════════════════════════════════════════ */
.qh-work-wrap { height: 100%; }
.qh-work-card {
  display: flex; flex-direction: column;
  background: #0F141C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  height: 100%;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.qh-work-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245,158,11,0.45);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.3);
}
.qh-work-thumb {
  position: relative;
  height: 200px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qh-work-wp .qh-work-thumb  { background: linear-gradient(135deg, #1a2a4f 0%, #0d1117 100%); }
.qh-work-app .qh-work-thumb { background: linear-gradient(135deg, #2a1a4f 0%, #0d1117 100%); }
.qh-work-ai .qh-work-thumb  { background: linear-gradient(135deg, #1a4a2e 0%, #0d1117 100%); }
.qh-work-thumb-icon {
  font-size: 4rem; opacity: 0.5;
  filter: grayscale(0.3);
}
.qh-work-thumb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.qh-work-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #FBBF24;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: 'DM Mono', ui-monospace, monospace;
}
.qh-work-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.qh-work-title {
  font-size: 18px; font-weight: 700;
  margin: 0 0 8px;
  color: #E5E7EB; line-height: 1.3;
}
.qh-work-desc {
  font-size: 14px; color: #9CA3AF; line-height: 1.6;
  margin: 0 0 14px;
}
.qh-work-stack {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; color: #6B7280;
  letter-spacing: 0.02em; margin-bottom: 18px;
}
.qh-work-link {
  font-size: 13px; font-weight: 600;
  color: #FBBF24;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap .2s ease;
}
.qh-work-card:hover .qh-work-link { gap: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════════════════ */
.qh-testi-wrap { height: 100%; }
.qh-testi {
  background: #0F141C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.qh-testi:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.qh-testi-stars {
  color: #F59E0B;
  font-size: 16px;
  letter-spacing: 4px;
  margin-bottom: 18px;
}
.qh-testi-quote {
  font-size: 15px; line-height: 1.7;
  color: #E5E7EB;
  margin: 0 0 24px;
  flex: 1;
  font-style: italic;
}
.qh-testi-author {
  display: flex; align-items: center; gap: 14px;
}
.qh-testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #0B0F17;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.qh-testi-name {
  font-size: 14px; font-weight: 700;
  color: #E5E7EB; line-height: 1.3;
}
.qh-testi-role {
  font-size: 12px; color: #6B7280;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════════════════════════════════════ */
.qh-cta-wrap { width: 100%; }
.qh-cta {
  position: relative;
  max-width: 1000px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(251,146,60,0.05) 100%);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 24px;
  padding: 64px 32px;
  text-align: center;
  overflow: hidden;
}
.qh-cta-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.qh-cta-h2 {
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: #E5E7EB;
}
.qh-cta-h2 span {
  background: linear-gradient(120deg, #FBBF24 0%, #FB923C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.qh-cta-sub {
  position: relative;
  font-size: 16px;
  color: #9CA3AF;
  margin: 0 0 32px;
}
.qh-cta-buttons {
  position: relative;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════
   Reduced motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .qh-orbit-1, .qh-orbit-2, .qh-hex, .qh-chip,
  .qh-hero-badge-dot, .qh-stage-glow {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.elementor-page { padding-top: 64px; }
  .qh-hero { min-height: auto; }
  .qh-stage { max-width: 420px; }
  .qh-chip { min-width: 145px; padding: 8px 12px; }
  .qh-chip-ic { width: 32px; height: 32px; font-size: 16px; }
}
@media (max-width: 768px) {
  .qh-trust { justify-content: center; text-align: center; }
  .qh-trust-label { width: 100%; text-align: center; }
}/* End custom CSS */