@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/raleway-variable.woff2') format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: oklch(16% 0.02 260); color: oklch(96% 0.005 260); font-family: 'Raleway', system-ui, sans-serif; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .hero-title span { animation: none !important; opacity: 0; position: static !important; display: block; }
  .hero-title span:first-child { opacity: 1; }
  .hero-title span:not(:first-child) { display: none; }
}
a { color: oklch(78% 0.16 245); text-decoration: none; }
a:hover { color: oklch(85% 0.13 245); }
::selection { background: oklch(65% 0.19 245 / 0.35); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: oklch(30% 0.05 245 / 0.5); border: 1px solid oklch(50% 0.1 245 / 0.5); font-size: 13px; font-weight: 600; color: oklch(85% 0.1 245); }
.btn-primary { background: linear-gradient(135deg, oklch(68% 0.19 245), oklch(64% 0.19 290)); color: oklch(99% 0 0); border: none; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: transparent; border: 1px solid oklch(45% 0.03 260); color: oklch(96% 0.005 260); }
.btn-secondary:hover { border-color: oklch(65% 0.19 245); background: oklch(65% 0.19 245 / 0.08); }
.btn { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.card-dark { background: oklch(21% 0.02 260); border: 1px solid oklch(30% 0.02 260); border-radius: 16px; padding: 28px; transition: border-color .2s, transform .2s; }
.card-dark:hover { border-color: oklch(50% 0.12 245); transform: translateY(-2px); }
.rubik-scene { --rubik-size: min(272px, 50vw); width: var(--rubik-size); height: var(--rubik-size); perspective: 900px; margin: 0 auto; }
.rubik-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: cube-spin 14s linear infinite; }
.rubik-face { position: absolute; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; padding: 6px; border-radius: 16px; background: oklch(20% 0.02 260); box-shadow: 0 0 0 1px oklch(30% 0.02 260) inset; }
.rubik-face-front { transform: translateZ(calc(var(--rubik-size) / 2)); }
.rubik-face-back { transform: rotateY(180deg) translateZ(calc(var(--rubik-size) / 2)); }
.rubik-face-right { transform: rotateY(90deg) translateZ(calc(var(--rubik-size) / 2)); }
.rubik-face-left { transform: rotateY(-90deg) translateZ(calc(var(--rubik-size) / 2)); }
.rubik-face-top { transform: rotateX(90deg) translateZ(calc(var(--rubik-size) / 2)); }
.rubik-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--rubik-size) / 2)); }
.rubik-tile { border-radius: 5px; box-shadow: 0 2px 6px oklch(10% 0.02 260 / 0.4); }
.rubik-tile.rubik-blue { background: linear-gradient(135deg, oklch(62% 0.19 245), oklch(48% 0.17 245)); }
.rubik-tile.rubik-purple { background: linear-gradient(135deg, oklch(62% 0.18 290), oklch(48% 0.16 290)); }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.portfolio-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid oklch(30% 0.02 260); background: oklch(21% 0.02 260); text-decoration: none; color: inherit; transition: border-color .2s; }
.portfolio-card:hover { border-color: oklch(50% 0.12 245); }
.portfolio-card-image { height: 210px; background-size: cover; background-position: center; flex: none; }
.portfolio-card.no-image .portfolio-card-image { background: linear-gradient(150deg, oklch(30% 0.09 245), oklch(22% 0.06 290)); }
.portfolio-card-body { padding: 10px 15px 10px; }
.portfolio-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: oklch(80% 0.14 245); display: inline-flex; align-items: center; gap: 6px; }
.portfolio-card h3 { font-size: 17px; font-weight: 700; margin: 8px 0 8px; color: oklch(97% 0.005 260); }
.portfolio-underline { display: block; width: 32px; height: 2px; background: oklch(72% 0.17 290); margin-bottom: 10px; }
.portfolio-desc { font-size: 13px; line-height: 1.5; color: oklch(70% 0.01 260); }
.portfolio-readmore { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: oklch(97% 0.005 260); margin-top: 12px; }
.portfolio-hidden { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .portfolio-underline { transition: width .3s ease; }
  .portfolio-card:hover .portfolio-underline { width: 56px; }
  .portfolio-desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
  .portfolio-readmore { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
  .portfolio-card:hover .portfolio-desc { max-height: 200px; opacity: 1; }
  .portfolio-card:hover .portfolio-readmore { max-height: 40px; opacity: 1; margin-top: 12px; }
}
.section { max-width: 1320px; margin: 0 auto; padding: 72px 32px; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.navlink { color: oklch(80% 0.01 260); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 14px; border-radius: 999px; transition: background .25s, backdrop-filter .25s, color .25s; }
.navlink:hover { color: oklch(96% 0.005 260); background: oklch(65% 0.19 245 / 0.12); backdrop-filter: blur(10px); }
.navlink:focus, .navlink:active, .navlink:target { color: oklch(96% 0.005 260); background: oklch(65% 0.19 245 / 0.22); backdrop-filter: blur(14px); outline: none; }
.burger-line { transition: transform .3s ease, opacity .2s ease; transform-origin: center; }
.nav-burger[data-open="true"] .burger-line-top { transform: translateY(5px) rotate(45deg); }
.nav-burger[data-open="true"] .burger-line-mid { opacity: 0; }
.nav-burger[data-open="true"] .burger-line-bottom { transform: translateY(-5px) rotate(-45deg); }
.nav-menu-backdrop { display: none; }
.nav-menu-footer { display: none; }
.input-dark { width: 100%; background: oklch(24% 0.02 260); border: 1px solid oklch(35% 0.02 260); border-radius: 12px; padding: 15px 20px; color: oklch(96% 0.005 260); font-family: inherit; font-size: 14px; }
.input-dark::placeholder { color: oklch(55% 0.01 260); }
.input-dark:focus { outline: none; border-color: oklch(65% 0.19 245); }
.input-dark.input-error { border-color: oklch(60% 0.18 25); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: oklch(22% 0.02 260); border: 1px solid oklch(35% 0.02 260); flex: none; }
.lang-btn { font-family: 'Raleway', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; padding: 6px 11px; border-radius: 999px; border: none; background: transparent; color: oklch(65% 0.01 260); cursor: pointer; transition: background .2s, color .2s; }
.lang-btn:hover { color: oklch(96% 0.005 260); }
.lang-btn[data-active="true"] { background: oklch(65% 0.19 245 / 0.25); color: oklch(96% 0.005 260); }
.qa-fab-ring { position: absolute; inset: 0; border-radius: 50%; background: oklch(68% 0.19 245 / 0.55); animation: tap-pulse 2.6s ease-out infinite; pointer-events: none; }
.qa-fab { position: fixed; bottom: calc(28px + env(safe-area-inset-bottom)); left: calc(28px + env(safe-area-inset-left)); z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, oklch(68% 0.19 245), oklch(64% 0.19 290)); border: none; color: white; cursor: pointer; box-shadow: 0 10px 28px oklch(10% 0.02 260 / 0.55); display: flex; align-items: center; justify-content: center; }
.qa-fab svg { position: relative; z-index: 1; }
.qa-modal-panel { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: calc(28px + env(safe-area-inset-left)); z-index: 70; width: 380px; max-width: calc(100vw - 40px); height: min(560px, 74vh); background: oklch(19% 0.02 260); border: 1px solid oklch(32% 0.02 260); border-radius: 18px; box-shadow: 0 24px 60px oklch(8% 0.02 260 / 0.6); display: none; flex-direction: column; overflow: hidden; }
.qa-modal-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, oklch(28% 0.07 250 / 0.6), oklch(24% 0.05 285 / 0.6)); border-bottom: 1px solid oklch(30% 0.02 260); }
.qa-modal-title { font-size: 14.5px; font-weight: 700; color: oklch(97% 0.005 260); }
.qa-modal-subtitle { font-size: 11.5px; color: oklch(72% 0.01 260); margin-top: 2px; }
.qa-modal-close { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid oklch(35% 0.02 260); background: oklch(24% 0.02 260); color: oklch(90% 0.005 260); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qa-modal-close:hover { border-color: oklch(65% 0.19 245); }
.qa-modal-panel .qa-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; margin-bottom: 0 !important; max-height: none !important; }
.qa-modal-panel .qa-chips { flex: none; padding: 0 16px 14px; margin-top: 0; justify-content: flex-start; }
.qa-modal-footer { flex: none; border-top: 1px solid oklch(30% 0.02 260); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.qa-modal-footer .qa-whatsapp-link, .qa-modal-footer .qa-input-row { margin-top: 0; }
@media (min-width: 641px) { .qa-modal-panel { display: none !important; } }
.qa-embed-section { position: relative; z-index: 2; }
.qa-embed-card { background: linear-gradient(135deg, oklch(26% 0.05 290 / 0.5), oklch(22% 0.03 260 / 0.5)); border: 1px solid oklch(40% 0.08 290 / 0.4); border-radius: 24px; padding: 48px; }
.qa-embed-inner { max-width: 960px; margin: 0 auto; }
.qa-embed-eyebrow { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: oklch(78% 0.16 245); margin-bottom: 10px; }
.qa-embed-greeting { font-size: 30px; font-weight: 800; color: oklch(97% 0.005 260); text-align: center; margin: 0 0 8px; }
.qa-embed-subtitle { font-size: 14.5px; color: oklch(72% 0.01 260); text-align: center; margin: 0 0 28px; }
.qa-body { display: flex; flex-direction: column; gap: 10px; }
.qa-embed-card .qa-body:not(:empty) { margin-bottom: 18px; max-height: 360px; overflow-y: auto; }
.qa-msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.qa-msg-bot { align-self: flex-start; background: oklch(26% 0.02 260); border: 1px solid oklch(32% 0.02 260); border-bottom-left-radius: 3px; color: oklch(94% 0.005 260); }
.qa-msg-user { align-self: flex-end; background: linear-gradient(135deg, oklch(68% 0.19 245), oklch(64% 0.19 290)); border: none; border-bottom-right-radius: 3px; color: #fff; }
.qa-msg-error { border-color: oklch(50% 0.15 25 / 0.5); background: oklch(30% 0.08 25 / 0.25); color: oklch(90% 0.02 25); }
.qa-typing-dot { display: inline-block; width: 5px; height: 5px; margin: 0 1.5px; border-radius: 50%; background: oklch(75% 0.01 260); animation: pulse-dot 1.1s ease-in-out infinite; }
.qa-typing-dot:nth-child(2) { animation-delay: .15s; }
.qa-typing-dot:nth-child(3) { animation-delay: .3s; }
.qa-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.qa-chip { display: inline-flex; align-items: center; gap: 8px; font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 999px; border: 1px solid oklch(45% 0.1 245 / 0.5); background: oklch(30% 0.06 245 / 0.35); color: oklch(90% 0.06 245); cursor: pointer; transition: border-color .2s, background .2s; }
.qa-chip svg { flex: none; }
.qa-chip:hover { border-color: oklch(65% 0.19 245); background: oklch(65% 0.19 245 / 0.18); }
.qa-input-row { display: flex; align-items: flex-end; gap: 10px; background: oklch(17% 0.02 260 / 0.7); border: 1px solid oklch(38% 0.02 260 / 0.7); border-radius: 999px; padding: 8px 8px 8px 22px; }
.qa-input-row textarea { flex: 1; border: none; background: transparent; resize: none; max-height: 90px; min-height: 0; padding: 8px 0; font-size: 15px; color: oklch(94% 0.005 260); }
.qa-input-row textarea::placeholder { color: oklch(58% 0.01 260); }
.qa-input-row textarea:focus { outline: none; }
.qa-send { flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, oklch(68% 0.19 245), oklch(64% 0.19 290)); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qa-send:disabled { opacity: 0.5; cursor: default; }
.qa-whatsapp-link { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 9px 14px; margin-top: 16px; border-radius: 10px; border: 1px solid oklch(50% 0.13 150 / 0.5); background: oklch(32% 0.08 150 / 0.28); color: oklch(88% 0.13 150); }
.qa-whatsapp-link:hover { background: oklch(32% 0.08 150 / 0.45); color: oklch(92% 0.13 150); }
.qa-lead-form { display: flex; flex-direction: column; gap: 8px; max-width: 92%; }
.qa-lead-form .qa-lead-input { padding: 9px 12px; font-size: 13px; min-height: 0; }
.qa-lead-form .qa-lead-submit { padding: 9px 14px; font-size: 12.5px; width: 100%; justify-content: center; }
.qa-lead-form .qa-lead-submit:disabled { opacity: 0.6; cursor: default; }
.qa-lead-error { font-size: 11.5px; color: oklch(75% 0.18 25); }
@keyframes loader-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes loader-caret-move { from { transform: translateX(0); } to { transform: translateX(calc(14ch - 0.26em)); } }
@keyframes loader-caret { 50% { opacity: 0; } }
@keyframes bar-grow { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
@keyframes dash-flow { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes float-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rotate-text { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: translateY(0); } 21% { opacity: 1; transform: translateY(0); } 25% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; } }
@keyframes hero-title-cycle { 0% { opacity: 0; transform: translateY(10px); } 9.2% { opacity: 1; transform: translateY(0); } 16% { opacity: 1; transform: translateY(0); } 25.2% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; } }
@keyframes hero-title-cycle-long { 0% { opacity: 0; transform: translateY(10px); } 9.2% { opacity: 1; transform: translateY(0); } 24% { opacity: 1; transform: translateY(0); } 33.2% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; } }
@keyframes code-line { 0% { opacity: 0; transform: translateX(-6px); } 8% { opacity: 1; transform: translateX(0); } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chat-in { 0% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes rocket-launch { 0% { transform: translateX(-50%) translateY(0) rotate(-2deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-260px) rotate(-2deg); opacity: 0; } }
@keyframes flame-flicker { 0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.9; } 50% { transform: scaleY(1.35) scaleX(0.85); opacity: 1; } }
@keyframes float-particle { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 0.55; } 85% { opacity: 0.25; } 100% { transform: translateY(-110vh) scale(0.5); opacity: 0; } }
@keyframes layer-in { 0% { opacity: 0; transform: translateY(40px); } 14% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes drift-3d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes cube-spin { 0% { transform: rotateX(-20deg) rotateY(0deg); } 100% { transform: rotateX(-20deg) rotateY(360deg); } }
@keyframes bar-grow { 0% { transform: scaleY(0); } 20% { transform: scaleY(1); } 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes tap-pulse { 0% { transform: scale(0.7); opacity: 0.7; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes smoke-puff { 0% { transform: translateY(0) scale(0.6); opacity: 0.5; } 100% { transform: translateY(46px) scale(1.8); opacity: 0; } }
@keyframes globe-spin { from { background-position-x: 0; } to { background-position-x: 240px; } }
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shine-sweep { 0% { transform: translateX(0) rotate(18deg); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateX(320%) rotate(18deg); opacity: 0; } 100% { transform: translateX(320%) rotate(18deg); opacity: 0; } }
@keyframes halo-pulse { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.08); opacity: 0.6; } }
@keyframes hand-reach { 0%, 100% { transform: rotate(-16deg) translateY(0); } 50% { transform: rotate(-13deg) translateY(-12px); } }
@keyframes finger-flex { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
@keyframes core-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, input, textarea, .card-dark { cursor: none; } }
@media (max-width: 1100px) { .services-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; } }
@media (max-width: 1320px) {
  h1 { font-size: 50px !important; }
  .hero-title { min-height: 115px !important; }
  .section { padding: 60px 24px; }
}
@media (max-width: 1264px) {
  .nav-burger { display: inline-flex !important; order: 2 !important; position: relative; z-index: 92; }
  .nav-inner { flex-wrap: wrap; gap: 10px !important; justify-content: space-between !important; }

  .nav-menu-backdrop {
    display: block;
    position: fixed;
    /* Not inset:0 — <nav> has backdrop-filter, which makes it the containing
       block for fixed descendants, so top/left/right (which coincide with the
       viewport since nav spans full width and sticks at 0) are safe, but a
       real viewport-relative height must be given explicitly instead of
       relying on bottom:0, which would resolve against nav's own ~60px box. */
    top: 0; left: 0; right: 0;
    height: 100vh; height: 100dvh;
    z-index: 90;
    background: oklch(10% 0.02 260 / 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-menu-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

  .nav-menu {
    position: fixed; top: 0; right: 0; z-index: 91;
    width: min(320px, 82vw); height: 100vh; height: 100dvh;
    flex-wrap: nowrap; gap: 0 !important;
    display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 96px 0 24px;
    background: linear-gradient(165deg, oklch(21% 0.05 265), oklch(15% 0.02 260) 55%);
    border-left: 1px solid oklch(38% 0.06 265 / 0.5);
    box-shadow: -24px 0 60px oklch(5% 0.02 260 / 0.55);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }
  .nav-menu .navlink {
    text-align: left; width: 100%; border-radius: 0;
    border-bottom: 1px solid oklch(32% 0.03 265 / 0.5);
    padding: 20px 30px; font-size: 15px;
  }
  .nav-menu .navlink:last-child { border-bottom: none; }
  .nav-menu[data-open="true"] { transform: translateX(0); }
  .nav-menu[data-open="false"] { pointer-events: none; }
  .nav-menu-footer { display: block; margin-top: auto; padding: 24px 30px 0; }
}
@media (max-width: 980px) {
  .rotator { height: 150px !important; }
  .rotator span { font-size: 30px !important; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  h1 { font-size: 42px !important; }
  .hero-title { min-height: 98px !important; }
  h2 { font-size: 30px !important; }
  .wapi-panel { padding: 32px !important; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
  .services-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .qa-embed-card { padding: 40px 32px; }
  .qa-embed-greeting { font-size: 26px; }
}
@media (max-width: 860px) {
  .section { padding: 44px 20px; }
  .qa-embed-card { padding: 32px 24px; }
  .qa-embed-eyebrow { font-size: 11.5px; }
  .qa-embed-greeting { font-size: 23px; }
  .qa-embed-subtitle { font-size: 13.5px; margin-bottom: 22px; }
  .contact-form { padding: 20px !important; max-width: 100% !important; justify-self: stretch !important; margin-top: 0 !important; }
  .contact-actions .btn, .contact-actions span.btn { justify-content: flex-start !important; width: 100%; }
  nav { padding: 10px 14px !important; }
  .nav-inner { row-gap: 8px !important; }
  .nav-cta { padding: 9px 16px !important; font-size: 12.5px !important; width: auto !important; }
}
@media (max-width: 640px) {
  .rotator span { font-size: 22px !important; padding: 0 8px !important; }
  .rotator { height: 120px !important; }
  .hero-stats { gap: 20px !important; }
  .hero-stats > div { min-width: 88px; }
  .footer-bar { flex-direction: column; align-items: flex-start; padding: 24px 20px !important; }
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  .hero-title { min-height: 86px !important; }
  h2 { font-size: 25px !important; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .wapi-panel { padding: 22px !important; border-radius: 18px !important; }
  .nav-inner { gap: 8px !important; row-gap: 6px !important; }
  .nav-menu { width: min(280px, 84vw) !important; padding-top: 84px !important; }
  .nav-brand-mark { font-size: 17px !important; }
  .nav-cta { padding: 8px 14px !important; font-size: 12px !important; }
  .nav-cta svg { display: none; }
  .nav-menu .navlink { font-size: 14px !important; padding: 17px 24px !important; }
  .services-row { grid-template-columns: 1fr !important; }
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .card-dark { padding: 20px !important; }
  .contact-form { padding: 18px !important; }
  .contact-form .input-dark { font-size: 13px !important; }
  section[id="wapidelo"] .grid-2 > div:last-child { justify-content: center !important; }
  .qa-embed-card { padding: 26px 18px !important; border-radius: 20px !important; }
  .qa-fab { width: 52px !important; height: 52px !important; bottom: calc(20px + env(safe-area-inset-bottom)) !important; left: calc(20px + env(safe-area-inset-left)) !important; }
  .qa-embed-section { display: none !important; }
  .qa-modal-panel { left: 10px !important; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)) !important; width: auto; max-width: none; height: min(72vh, 560px); }
  .qa-embed-eyebrow { font-size: 11px !important; }
  .qa-embed-greeting { font-size: 20px !important; }
  .qa-embed-subtitle { font-size: 12.5px !important; margin-bottom: 18px !important; }
  .qa-input-row { padding: 6px 6px 6px 16px !important; }
  .qa-input-row textarea { font-size: 14px !important; }
  .qa-send { width: 38px !important; height: 38px !important; }
  .qa-chips { gap: 8px !important; margin-top: 14px !important; }
  .qa-chip { font-size: 12px !important; padding: 9px 14px !important; }
  .qa-whatsapp-link { font-size: 12px !important; padding: 8px 12px !important; }
}
@media (max-width: 400px) {
  .section { padding: 36px 16px; }
  .qa-embed-card { padding: 20px 14px !important; }
  .qa-embed-greeting { font-size: 18px !important; }
  .qa-embed-subtitle { font-size: 12px !important; }
  .qa-chip { font-size: 11px !important; padding: 8px 11px !important; gap: 6px !important; }
  .qa-chip svg { width: 13px !important; height: 13px !important; }
  h1 { font-size: 28px !important; }
  .hero-title { min-height: 72px !important; }
  h2 { font-size: 22px !important; }
  .badge { font-size: 11.5px; padding: 6px 12px; }
  .hero-stats { gap: 16px !important; }
  .hero-stats > div { min-width: 76px; }
  .hero-stats > div > div:first-child { font-size: 24px !important; }
  .nav-brand-mark { font-size: 15px !important; }
  .lang-btn { padding: 5px 9px; font-size: 11px; }
  .wapi-panel { padding: 18px !important; }
  form.contact-form { gap: 10px; }
}