/* ══════════════════════════════════════ VARIÁVEIS KUZACRAFT & BASE ══════════════════════════════════════ */
 :root {
   --main-text:#ffffff;
   --kz-primary: #0097b2;
   --kz-primary-d: #006f87;
   --kz-primary-xl: #004f63;
   --kz-primary-l: #e3f6fa;
   --kz-accent: #f07b07;
   --kz-dark: #181A1C;
   --kz-body: #374151;
   --kz-muted: #5a6066;
   --kz-border: #e4e8ec;
   --kz-purple: #4c1d95;
   --nav-h: 68px;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 body {
   font-family: 'Nunito', sans-serif;
   margin: 0;
   background: #fff;
   -webkit-font-smoothing: antialiased;
   color: var(--kz-dark);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .fw-black {
   font-family: 'Nunito', sans-serif;
   font-weight: 800;
   color: var(--kz-dark);
   letter-spacing: -0.5px;
 }

 /* ── Skip link ── */
 .skip-link {
   position: absolute;
   top: -100%;
   left: 0;
   z-index: 9999;
   background: var(--kz-primary);
   color: #fff;
   font-weight: 700;
   padding: 10px 20px;
   text-decoration: none;
   border-radius: 0;
 }

 .skip-link:focus {
   top: 0;
   outline: 3px solid var(--kz-accent);
 }

 /* ══════════════════════════════════════
           NAVBAR PREMIUM & OFFCANVAS (WeChat Style)
        ══════════════════════════════════════ */
 .navbar-premium {
   background: rgba(255, 255, 255, 0.92) !important;
   backdrop-filter: blur(15px);
   border-bottom: 1px solid var(--kz-border);
   height: var(--nav-h);
   transition: all 0.3s ease;
 }

 .navbar-premium .nav-link {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--kz-body) !important;
   letter-spacing: 0.03em;
   transition: color 0.3s;
 }

 .navbar-premium .nav-link:hover {
   color: var(--kz-primary) !important;
 }

 /* Botões navbar — retos e limpos */
 .btn-outline-secondary {
   border-radius: 4px !important;
   border-color: var(--kz-border) !important;
   color: var(--kz-dark) !important;
   font-weight: 700;
   font-size: 0.85rem;
 }

 .btn-outline-secondary:hover {
   border-color: var(--kz-primary) !important;
   background: var(--kz-primary-l) !important;
   color: var(--kz-primary) !important;
 }

 .btn-primary {
   border-radius: 4px !important;
   background: var(--kz-primary) !important;
   border-color: var(--kz-primary) !important;
   font-weight: 800;
   font-size: 0.85rem;
 }

 .btn-primary:hover {
   background: var(--kz-primary-d) !important;
   border-color: var(--kz-primary-d) !important;
 }

 /* Offcanvas mobile — estilo WeChat */
 #mainMenu {
   max-width: 320px;
   background: rgba(255, 255, 255, 0.96) !important;
   backdrop-filter: blur(16px);
 }

 #mainMenu .nav-link {
   font-size: 1.05rem;
   font-weight: 700;
   color: #333 !important;
   padding: 1.1rem 0;
   border-bottom: 1px solid #f0f0f0;
   border-radius: 0;
   transition: color 0.2s;
 }

 #mainMenu .nav-link:last-child {
   border-bottom: none;
 }

 #mainMenu .nav-link:hover,
 #mainMenu .nav-link:focus {
   color: var(--kz-primary) !important;
   background: transparent;
 }

 /* ═══════════════════════════════════════════════════
           HERO WRAPPER & CAROUSEL (BOXED WHATSAPP STYLE)
        ═══════════════════════════════════════════════════ */
 .hero-wrap {
   background: #f0f2f5;
   height: 100dvh;
   /* Ocupa exatamente a tela visível */
   padding: var(--nav-h) 24px 24px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }

 .hero-carousel {
   position: relative;
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   flex: 1 1 0;
   min-height: 0;
   overflow: hidden;
   border-radius: 0;
   background: #111;
 }

 .hc-progress {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   z-index: 20;
 }

 .hc-progress-fill {
   height: 100%;
   background: var(--kz-primary);
   width: 0%;
   transition: width linear;
 }

 .hc-track {
   display: flex;
   width: 100%;
   height: 100%;
   transition: transform .65s cubic-bezier(.77, 0, .18, 1);
   will-change: transform;
 }

 .hc-slide {
   flex: 0 0 100%;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }

 .hc-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center top;
   transition: transform 8s ease;
   transform: scale(1);
 }

 .hc-slide.is-active .hc-bg {
   transform: scale(1.05);
 }

 .hc-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(13, 26, 32, .85) 0%, rgba(13, 26, 32, .65) 38%, rgba(13, 26, 32, .1) 65%, transparent 100%);
 }

 .hc-content {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 56px;
   max-width: 640px;
   z-index: 5;
 }

 .hc-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .75);
   margin-bottom: 14px;
   opacity: 0;
   transform: translateY(12px);
 }

 .hc-eyebrow .edot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--kz-accent);
   flex-shrink: 0;
 }

 .hc-slide.is-active .hc-eyebrow {
   animation: kzUp .45s .08s ease forwards;
 }

 .hc-title {
   font-size: clamp(2.4rem, 4.8vw, 4rem);
   font-weight: 900;
   line-height: 1.06;
   letter-spacing: -.03em;
   color: #fff;
   margin: 0 0 16px;
   opacity: 0;
   transform: translateY(18px);
 }

 .hc-title .ta {
   color: var(--kz-primary);
 }

 .hc-slide.is-active .hc-title {
   animation: kzUp .5s .20s ease forwards;
 }

 .hc-sub {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.65;
   color: rgba(255, 255, 255, .85);
   max-width: 420px;
   margin: 0 0 32px;
   opacity: 0;
   transform: translateY(12px);
 }

 .hc-slide.is-active .hc-sub {
   animation: kzUp .45s .34s ease forwards;
 }

 .hc-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   opacity: 0;
   transform: translateY(10px);
 }

 .hc-slide.is-active .hc-ctas {
   animation: kzUp .45s .46s ease forwards;
 }

 .btn-h-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--kz-primary);
   color: #fff !important;
   font-weight: 800;
   font-size: 0.88rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   text-decoration: none;
   padding: 13px 26px;
   border-radius: 0;
   border: 2px solid var(--kz-primary);
   transition: background .2s, border-color .2s;
   white-space: nowrap;
 }

 .btn-h-primary:hover {
   background: var(--kz-primary-d);
   border-color: var(--kz-primary-d);
 }

 .btn-h-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: #fff !important;
   font-weight: 700;
   font-size: 0.88rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   text-decoration: none;
   padding: 13px 22px;
   border-radius: 0;
   border: 2px solid rgba(255, 255, 255, .50);
   transition: border-color .2s, background .2s;
   white-space: nowrap;
 }

 .btn-h-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .10);
 }

 .fcard {
   position: absolute;
   z-index: 10;
   background: #fff;
   border-radius: 0;
   border-left: 3px solid var(--kz-primary);
   padding: 11px 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 180px;
   opacity: 0;
   transform: translateY(10px);
 }

 .hc-slide.is-active .fcard {
   animation: kzUp .45s ease forwards;
 }

 .fcard-1 {
   bottom: 18%;
   right: 8%;
   animation-delay: .55s !important;
   animation: kzUp .45s .55s ease forwards;
 }

 .fcard-2 {
   top: 16%;
   right: 8%;
   animation: kzUp .45s .70s ease forwards;
 }

 .fcard-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.05rem;
   flex-shrink: 0;
 }

 .fcard-1 .fcard-icon {
   background: #d1fae5;
   color: #065f46;
 }

 .fcard-2 .fcard-icon {
   background: var(--kz-primary-l);
   color: var(--kz-primary-d);
 }

 .fcard-label {
   font-size: 0.70rem;
   font-weight: 600;
   color: var(--kz-muted);
   line-height: 1;
 }

 .fcard-value {
   font-size: 0.92rem;
   font-weight: 900;
   color: var(--kz-dark);
   line-height: 1.2;
   margin-top: 3px;
 }

 .hc-slide.is-active .fcard-1 {
   animation: kzUp .45s .55s ease forwards, kzFloat 4s 1.1s ease-in-out infinite;
 }

 .hc-slide.is-active .fcard-2 {
   animation: kzUp .45s .70s ease forwards, kzFloat2 4.5s 1.3s ease-in-out infinite;
 }

 .hc-controls {
   position: absolute;
   bottom: 24px;
   left: 56px;
   display: flex;
   align-items: center;
   gap: 12px;
   z-index: 15;
 }

 .hc-dot {
   width: 22px;
   height: 3px;
   background: rgba(255, 255, 255, .35);
   border: none;
   padding: 0;
   cursor: pointer;
   transition: background .3s, width .3s;
 }

 .hc-dot.is-active {
   background: var(--kz-primary);
   width: 38px;
 }

 .hc-arr {
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .25);
   color: #fff;
   font-size: 1rem;
   cursor: pointer;
   transition: background .2s;
 }

 .hc-arr:hover {
   background: rgba(255, 255, 255, .22);
 }

 .hc-count {
   font-size: 0.72rem;
   font-weight: 800;
   color: rgba(255, 255, 255, .50);
   letter-spacing: .08em;
   margin-left: 4px;
 }

 .hc-count b {
   color: #fff;
 }

 .hc-lema {
   position: absolute;
   bottom: 30px;
   right: 56px;
   display: flex;
   align-items: center;
   gap: 10px;
   opacity: 0;
   z-index: 10;
 }

 .hc-slide.is-active .hc-lema {
   animation: kzUp .4s .65s ease forwards;
 }

 .hc-lema-line {
   width: 24px;
   height: 2px;
   background: var(--kz-primary);
   flex-shrink: 0;
 }

 .hc-lema-text {
   font-size: 0.70rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
 }

 @keyframes kzUp {
   from {
     opacity: 0;
     transform: translateY(14px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 }

 @keyframes kzFloat {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-8px)
   }
 }

 @keyframes kzFloat2 {

   0%,
   100% {
     transform: translateY(-4px)
   }

   50% {
     transform: translateY(4px)
   }
 }

 /* ═══════════════════════════════════════════
           COMPONENTES GLOBAIS E RESPONSIVO
        ═══════════════════════════════════════════ */
 .service-card {
   background: #fff;
   border-radius: 6px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .service-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   background: #fcfcfc;
 }

 .tech-logo {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .kz-input-cta {
   border: 2px solid var(--kz-border);
   transition: all 0.3s;
   font-size: 0.95rem;
 }

 .kz-input-cta:focus {
   border-color: var(--kz-primary);
   box-shadow: 0 0 0 3px var(--kz-primary-l);
   outline: none;
 }

 @media (max-width: 1199px) {
   .fcard {
     display: none;
   }
 }

 @media (max-width: 991px) {
   :root {
     --nav-h: 68px;
   }

   .hero-wrap {
     padding: var(--nav-h) 16px 16px;
   }

   .hc-content {
     padding: 0 24px;
   }

   .hc-controls {
     left: 24px;
     bottom: 20px;
   }
 }

 @media (max-width: 575px) {
   :root {
     --nav-h: 60px;
   }

   .hero-wrap {
     padding: var(--nav-h) 10px 10px;
   }

   .hc-title {
     font-size: clamp(1.8rem, 8vw, 2.6rem);
   }

   .hc-sub {
     display: none;
   }

   .hc-ctas {
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
   }

   .btn-h-primary,
   .btn-h-ghost {
     font-size: 0.82rem;
     padding: 11px 18px;
   }

   .hc-lema {
     display: none;
   }

   .hc-eyebrow {
     font-size: 0.65rem;
   }

   .hc-controls {
     left: 16px;
     bottom: 16px;
   }
 }