/*
Theme Name: VELTRIX AI
Theme URI: https://example.com/
Author: VELTRIX
Description: Custom WordPress theme converted from the VELTRIX AI home and portfolio HTML designs.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: veltrix-ai
*/

/* WordPress-safe basics */
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; }
.admin-bar header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar header { top: 46px; }
}
.wp-block-image img { max-width: 100%; height: auto; }

        @layer base {

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            overscroll-behavior: none;
        }

        main>:first-child {
            margin-top: 0 !important;
        }

        main>:last-child {
            margin-bottom: 0 !important;
        }
    }

    ::-webkit-scrollbar {
        display: none;
    }

    /* Scroll reveal base styles */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    .reveal-on-scroll.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Optional: stagger children inside a grid/section */
    .reveal-on-scroll.stagger>* {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .reveal-on-scroll.stagger.revealed>* {
        opacity: 1;
        transform: translateY(0);
    }

    /* =========================

CUSTOM CURSOR
========================= */

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border: 1.5px solid rgba(0, 255, 255, 0.9);
        box-shadow: 0 0 12px rgba(0, 255, 255, 0.25);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        transition:
                width 0.25s ease,
                height 0.25s ease,
                background 0.25s ease,
                border 0.25s ease;
        mix-blend-mode: difference;
    }

    .custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 5px;
        height: 5px;
        background: #00ffff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 100000;
        transform: translate(-50%, -50%);
    }

    .custom-cursor.hover {
        width: 45px;
        height: 45px;
        background: rgba(0, 255, 255, 0.08);
        border-color: rgba(0, 255, 255, 0.8);
    }

    @media (hover: none),
    (pointer: coarse) {

        .custom-cursor,
        .custom-cursor-dot {
            display: none;
        }
    }



    /* KINESYS floating controls — independent of Tailwind */
    .kys-whatsapp,
    .kys-chat-launcher,
    .kys-chat {
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .kys-whatsapp {
        position: fixed;
        right: 24px;
        bottom: 28px;
        width: 68px;
        height: 68px;
        z-index: 99990;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #25D366;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 10px 35px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .15) inset;
        animation: kys-wa-float 2.6s ease-in-out infinite;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .kys-whatsapp:hover {
        transform: scale(1.1);
        box-shadow: 0 14px 40px rgba(37, 211, 102, .35);
    }

    .kys-whatsapp svg {
        width: 42px;
        height: 42px;
        fill: currentColor;
    }

    @keyframes kys-wa-float {

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

        50% {
            transform: translateY(-9px);
        }
    }

    .kys-chat-launcher {
        position: fixed;
        right: 24px;
        bottom: 110px;
        width: 62px;
        height: 62px;
        z-index: 99989;
        border: 1px solid rgba(0, 240, 255, .45);
        border-radius: 50%;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: #030712;
        background: linear-gradient(135deg, #00F0FF, #7df4ff);
        box-shadow: 0 10px 32px rgba(0, 240, 255, .28), 0 0 28px rgba(0, 240, 255, .18);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .kys-chat-launcher:hover {
        transform: scale(1.08);
        box-shadow: 0 14px 40px rgba(0, 240, 255, .4);
    }

    .kys-chat-launcher .material-symbols-outlined {
        font-size: 30px;
    }

    .kys-chat-pulse {
        position: absolute;
        inset: -5px;
        border: 2px solid rgba(0, 240, 255, .35);
        border-radius: 50%;
        animation: kys-pulse 2s ease-out infinite;
    }

    @keyframes kys-pulse {
        0% {
            transform: scale(.88);
            opacity: .8;
        }

        100% {
            transform: scale(1.25);
            opacity: 0;
        }
    }

    .kys-chat {
        position: fixed;
        right: 24px;
        bottom: 184px;
        width: min(380px, calc(100vw - 28px));
        height: 520px;
        z-index: 99991;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(0, 240, 255, .2);
        border-radius: 22px;
        background: rgba(9, 13, 22, .97);
        color: #dfe2ef;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 35px rgba(0, 240, 255, .08);
        backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(18px) scale(.96);
        transform-origin: bottom right;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    .kys-chat.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .kys-chat-head {
        padding: 15px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        background: linear-gradient(135deg, rgba(0, 240, 255, .09), rgba(99, 102, 241, .08));
    }

    .kys-chat-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .kys-chat-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: #00F0FF;
        background: #111827;
        border: 1px solid rgba(0, 240, 255, .22);
    }

    .kys-chat-avatar .material-symbols-outlined {
        font-size: 23px;
    }

    .kys-chat-brand strong {
        display: block;
        font-size: 14px;
        letter-spacing: .02em;
    }

    .kys-chat-brand small {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        color: #94A3B8;
        font-size: 11px;
    }

    .kys-chat-brand small span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #C4F135;
        box-shadow: 0 0 8px rgba(196, 241, 53, .65);
    }

    .kys-chat-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 10px;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: #94A3B8;
        background: transparent;
    }

    .kys-chat-close:hover {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }

    .kys-chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 18px 14px;
        scrollbar-width: thin;
    }

    .kys-message {
        max-width: 84%;
        margin: 0 0 10px;
        padding: 11px 13px;
        border-radius: 15px;
        font-size: 13px;
        line-height: 1.55;
    }

    .kys-bot {
        color: #dfe2ef;
        background: #151b29;
        border: 1px solid rgba(255, 255, 255, .07);
        border-top-left-radius: 5px;
    }

    .kys-user {
        margin-left: auto;
        color: #030712;
        background: #00F0FF;
        border-top-right-radius: 5px;
    }

    .kys-typing {
        opacity: .65;
        font-style: italic;
    }

    .kys-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 12px;
    }

    .kys-quick-actions button {
        border: 1px solid rgba(0, 240, 255, .25);
        background: rgba(0, 240, 255, .06);
        color: #00F0FF;
        padding: 7px 10px;
        border-radius: 999px;
        cursor: pointer;
        font-size: 11px;
    }

    .kys-quick-actions button:hover {
        background: rgba(0, 240, 255, .14);
    }

    .kys-chat-form {
        display: flex;
        gap: 8px;
        padding: 11px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: #090D16;
    }

    .kys-chat-form input {
        flex: 1;
        min-width: 0;
        border: 1px solid rgba(255, 255, 255, .1);
        outline: 0;
        border-radius: 12px;
        padding: 11px 12px;
        background: #111827;
        color: #fff;
        font-size: 13px;
    }

    .kys-chat-form input:focus {
        border-color: rgba(0, 240, 255, .5);
        box-shadow: 0 0 0 3px rgba(0, 240, 255, .08);
    }

    .kys-chat-form button {
        width: 42px;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        display: grid;
        place-items: center;
        background: #00F0FF;
        color: #030712;
    }

    .kys-chat-form button:hover {
        background: #7df4ff;
    }

    @media (max-width: 640px) {
        .kys-whatsapp {
            right: 15px;
            bottom: 18px;
            width: 60px;
            height: 60px;
        }

        .kys-whatsapp svg {
            width: 37px;
            height: 37px;
        }

        .kys-chat-launcher {
            right: 15px;
            bottom: 91px;
            width: 56px;
            height: 56px;
        }

        .kys-chat-launcher .material-symbols-outlined {
            font-size: 27px;
        }

        .kys-chat {
            right: 14px;
            bottom: 158px;
            width: calc(100vw - 28px);
            height: min(520px, calc(100vh - 185px));
            border-radius: 18px;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .kys-whatsapp,
        .kys-chat-pulse {
            animation: none;
        }
    }



    @layer base {

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        overscroll-behavior: none;
      }

      main>:first-child {
        margin-top: 0 !important;
      }

      main>:last-child {
        margin-bottom: 0 !important;
      }
    }

    ::-webkit-scrollbar {
      display: none;
    }

    /* Motion & Micro-interaction Animations */
    @keyframes floatOrb1 {

      0%,
      100% {
        transform: translate(0px, 0px) scale(1);
      }

      50% {
        transform: translate(45px, 35px) scale(1.12);
      }
    }

    @keyframes floatOrb2 {

      0%,
      100% {
        transform: translate(0px, 0px) scale(1);
      }

      50% {
        transform: translate(-35px, -25px) scale(1.08);
      }
    }

    @keyframes shimmerSweep {
      0% {
        transform: translateX(-150%) skewX(-20deg);
      }

      50%,
      100% {
        transform: translateX(250%) skewX(-20deg);
      }
    }

    @keyframes radarScan {
      0% {
        transform: translateY(-100%);
        opacity: 0;
      }

      15% {
        opacity: 0.8;
      }

      85% {
        opacity: 0.8;
      }

      100% {
        transform: translateY(180%);
        opacity: 0;
      }
    }

    @keyframes lineFlow {
      0% {
        stroke-dashoffset: 24;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes pulseGlow {

      0%,
      100% {
        opacity: 0.4;
        transform: scale(1);
      }

      50% {
        opacity: 0.9;
        transform: scale(1.2);
      }
    }

    @keyframes rotateSubtle {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes heroFadeUp {
      0% {
        opacity: 0;
        transform: translateY(24px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .anim-hero-1 {
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .anim-hero-2 {
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
      opacity: 0;
    }

    .anim-hero-3 {
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
      opacity: 0;
    }

    .anim-hero-4 {
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
      opacity: 0;
    }

    .orb-float-1 {
      animation: floatOrb1 18s ease-in-out infinite;
    }

    .orb-float-2 {
      animation: floatOrb2 22s ease-in-out infinite;
    }

    .btn-shimmer-wrap {
      position: relative;
      overflow: hidden;
    }

    .btn-shimmer-wrap::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
      animation: shimmerSweep 4.5s ease-in-out infinite;
      pointer-events: none;
    }

    .flow-dash {
      stroke-dasharray: 6 6;
      animation: lineFlow 1.6s linear infinite;
    }

    .flow-dash-fast {
      stroke-dasharray: 4 4;
      animation: lineFlow 1s linear infinite;
    }

    .scan-radar {
      animation: radarScan 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .synapse-pulse {
      animation: pulseGlow 3s ease-in-out infinite;
    }

    .project-card {
      perspective: 1000px;
      transform-style: preserve-3d;
      transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.3s ease;
      will-change: transform, box-shadow;
    }

    .project-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 16px 40px -10px rgba(0, 240, 255, 0.25), 0 0 0 1px rgba(0, 240, 255, 0.35);
    }

    .tech-chip {
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .tech-chip:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px -4px rgba(0, 240, 255, 0.2);
      border-color: rgba(0, 240, 255, 0.4);
    }

    .industry-card {
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .industry-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -8px rgba(0, 240, 255, 0.15);
      border-color: rgba(0, 240, 255, 0.3);
    }

    .industry-card:hover .industry-icon {
      transform: scale(1.1);
      transition: transform 0.3s ease;
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      ::before,
      ::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
      }
    }

    /* =========================
   CUSTOM CURSOR
========================= */

    .custom-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border: 1.5px solid rgba(0, 255, 255, 0.9);
      box-shadow: 0 0 12px rgba(0, 255, 255, 0.25);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease,
        border 0.25s ease;
      mix-blend-mode: difference;
    }

    .custom-cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 5px;
      height: 5px;
      background: #00ffff;
      border-radius: 50%;
      pointer-events: none;
      z-index: 100000;
      transform: translate(-50%, -50%);
    }

    .custom-cursor.hover {
      width: 45px;
      height: 45px;
      background: rgba(0, 255, 255, 0.08);
      border-color: rgba(0, 255, 255, 0.8);
    }

    @media (hover: none),
    (pointer: coarse) {

      .custom-cursor,
      .custom-cursor-dot {
        display: none;
      }
    }
  


    .kys-portfolio-section {
      padding: 120px 24px 100px;
      overflow: hidden;
      background: linear-gradient(180deg, transparent, rgba(0, 240, 255, .025), transparent)
    }

    .kys-portfolio-container {
      max-width: 1200px;
      margin: auto
    }

    .kys-portfolio-hero {
      text-align: center;
      max-width: 850px;
      margin: 0 auto 55px
    }

    .kys-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #00f0ff;
      font: 700 11px monospace;
      letter-spacing: .22em;
      margin-bottom: 18px
    }

    .kys-eyebrow span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #00f0ff;
      box-shadow: 0 0 15px #00f0ff
    }

    .kys-portfolio-hero h2 {
      font-size: clamp(38px, 6vw, 76px);
      line-height: .98;
      letter-spacing: -.045em;
      color: #f5f7fb;
      margin: 0
    }

    .kys-portfolio-hero h2 em,
    .kys-final-cta h3 em {
      color: #00f0ff;
      font-style: normal
    }

    .kys-portfolio-hero p {
      max-width: 650px;
      margin: 24px auto;
      color: #8f9aad;
      font-size: 16px;
      line-height: 1.75
    }

    .kys-portfolio-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap
    }

    .kys-primary-btn,
    .kys-secondary-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 18px;
      border-radius: 8px;
      text-decoration: none;
      font-size: 12px;
      font-weight: 800;
      transition: .3s
    }

    .kys-primary-btn {
      background: #00f0ff;
      color: #061016;
      box-shadow: 0 0 25px rgba(0, 240, 255, .18)
    }

    .kys-primary-btn:hover,
    .kys-secondary-btn:hover {
      transform: translateY(-3px)
    }

    .kys-secondary-btn {
      color: #dfe7ef;
      border: 1px solid rgba(255, 255, 255, .12)
    }

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

    .kys-filters button {
      border: 1px solid rgba(255, 255, 255, .09);
      background: rgba(255, 255, 255, .025);
      color: #8f9aad;
      padding: 10px 14px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 11px;
      transition: .25s
    }

    .kys-filters button.active,
    .kys-filters button:hover {
      color: #031014;
      background: #00f0ff;
      border-color: #00f0ff
    }

    .kys-project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px
    }

    .kys-project-card {
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(10, 15, 24, .72);
      transition: .45s;
      box-shadow: 0 15px 50px rgba(0, 0, 0, .2)
    }

    .kys-project-card:hover {
      transform: translateY(-9px);
      border-color: rgba(0, 240, 255, .3);
      box-shadow: 0 25px 65px rgba(0, 0, 0, .34), 0 0 35px rgba(0, 240, 255, .06)
    }

    .kys-project-card.is-hidden {
      display: none
    }

    .kys-project-visual {
      height: 285px;
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #080d15
    }

    .kys-project-visual:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(0, 240, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, .055) 1px, transparent 1px);
      background-size: 35px 35px
    }

    .kys-project-visual>.material-symbols-outlined {
      font-size: 75px;
      color: #00f0ff;
      text-shadow: 0 0 35px rgba(0, 240, 255, .55);
      z-index: 2
    }

    .kys-project-visual small {
      position: absolute;
      bottom: 18px;
      left: 20px;
      color: #5f7187;
      font: 700 9px monospace;
      letter-spacing: .16em
    }

    .visual-ai {
      background: radial-gradient(circle, rgba(0, 240, 255, .12), transparent 50%), #080d15
    }

    .kys-orbit {
      width: 220px;
      height: 90px;
      border: 1px solid rgba(0, 240, 255, .32);
      border-radius: 50%;
      transform: rotate(-25deg);
      animation: kys-orbit 5s linear infinite
    }

    .visual-web {
      background: radial-gradient(circle, rgba(90, 100, 255, .12), transparent 55%), #080d15
    }

    .kys-browser {
      position: absolute;
      width: 62%;
      height: 63%;
      border: 1px solid rgba(0, 240, 255, .25);
      border-radius: 12px;
      background: rgba(15, 24, 38, .85);
      transform: rotateX(7deg) rotateY(-10deg);
      box-shadow: 0 20px 40px #0006
    }

    .kys-browser i {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin: 10px 2px;
      background: #5b7185
    }

    .kys-browser b {
      display: block;
      height: 1px;
      background: #00f033;
      margin-top: 4px;
      opacity: .2
    }

    .visual-vision {
      background: radial-gradient(circle, rgba(0, 240, 255, .11), transparent 48%), #080d15
    }

    .kys-scan {
      width: 180px;
      height: 180px;
      border: 1px solid rgba(0, 240, 255, .25);
      border-radius: 50%;
      animation: kys-spin 8s linear infinite
    }

    .visual-auto {
      background: radial-gradient(circle, rgba(0, 240, 255, .1), transparent 50%), #080d15
    }

    .kys-flow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #00f0ff;
      font: 700 12px monospace;
      z-index: 2
    }

    .kys-flow b {
      padding: 12px 10px;
      border: 1px solid rgba(0, 240, 255, .3);
      border-radius: 8px
    }

    .kys-flow i {
      font-style: normal
    }

    .visual-mobile {
      background: radial-gradient(circle, rgba(90, 100, 255, .13), transparent 50%), #080d15
    }

    .kys-phone {
      width: 112px;
      height: 205px;
      border: 3px solid #465669;
      border-radius: 22px;
      background: #0c1420;
      transform: rotate(-8deg);
      position: absolute
    }

    .kys-phone b {
      position: absolute;
      inset: 42px 12px 12px;
      border-radius: 8px;
      background: rgba(0, 240, 255, .15)
    }

    .visual-cloud {
      background: radial-gradient(circle, rgba(0, 240, 255, .1), transparent 55%), #080d15
    }

    .kys-cloud {
      width: 180px;
      height: 70px;
      border: 1px solid rgba(0, 240, 255, .25);
      border-radius: 50%
    }

    .kys-project-content {
      padding: 25px
    }

    .kys-category {
      font: 700 10px monospace;
      letter-spacing: .16em;
      color: #00f0ff
    }

    .kys-project-content h3 {
      font-size: 28px;
      color: #f4f7fb;
      margin: 9px 0
    }

    .kys-project-content p {
      color: #8f9aad;
      font-size: 13px;
      line-height: 1.7;
      min-height: 44px
    }

    .kys-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 17px 0
    }

    .kys-tags span {
      padding: 5px 8px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 5px;
      color: #77879a;
      font: 10px monospace
    }

    .kys-case-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: none;
      color: #dce6ef;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: .25s
    }

    .kys-case-btn:hover {
      color: #00f0ff;
      gap: 10px
    }

    .kys-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin: 70px 0;
      border-block: 1px solid rgba(255, 255, 255, .08)
    }

    .kys-stats div {
      text-align: center;
      padding: 35px 12px;
      border-right: 1px solid rgba(255, 255, 255, .07)
    }

    .kys-stats div:last-child {
      border: 0
    }

    .kys-stats strong {
      display: block;
      color: #00f0ff;
      font-size: 38px
    }

    .kys-stats span {
      color: #748397;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .13em
    }

    .kys-tech-section {
      text-align: center;
      padding: 20px 0 80px
    }

    .kys-tech-section h3 {
      color: #f3f6fb;
      font-size: 35px;
      margin: 0 0 25px
    }

    .kys-tech-grid {
      display: flex;
      justify-content: center;
      gap: 9px;
      flex-wrap: wrap
    }

    .kys-tech-grid span {
      padding: 11px 14px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      color: #9aa9ba;
      font: 11px monospace;
      transition: .25s
    }

    .kys-tech-grid span:hover {
      border-color: #00f0ff;
      color: #00f0ff;
      transform: translateY(-3px)
    }

    .kys-final-cta {
      text-align: center;
      padding: 75px 20px;
      border: 1px solid rgba(0, 240, 255, .12);
      border-radius: 25px;
      background: radial-gradient(circle at 50% 0, rgba(0, 240, 255, .11), transparent 55%), rgba(7, 12, 20, .7)
    }

    .kys-final-cta h3 {
      font-size: clamp(36px, 5vw, 62px);
      line-height: 1;
      margin: 0;
      color: #f4f7fb
    }

    .kys-final-cta p {
      color: #8f9aad;
      margin: 18px 0 28px
    }

    .kys-reveal {
      opacity: 0;
      transform: translateY(34px);
      transition: opacity .8s ease, transform .8s ease
    }

    .kys-reveal.visible {
      opacity: 1;
      transform: none
    }

    @keyframes kys-orbit {
      to {
        transform: rotate(335deg)
      }
    }

    @keyframes kys-spin {
      to {
        transform: rotate(360deg)
      }
    }

    @media(max-width:800px) {
      .kys-project-grid {
        grid-template-columns: 1fr
      }

      .kys-stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .kys-stats div {
        border-bottom: 1px solid rgba(255, 255, 255, .07)
      }

      .kys-portfolio-section {
        padding: 85px 16px
      }

      .kys-project-visual {
        height: 230px
      }
    }

    @media(max-width:520px) {
      .kys-project-content h3 {
        font-size: 24px
      }

      .kys-portfolio-actions a {
        width: 100%;
        justify-content: center
      }
    }
  


    .kys-whatsapp {
      position: fixed;
      right: 24px;
      bottom: 25px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25d366;
      color: #fff;
      z-index: 99990;
      box-shadow: 0 10px 30px #0006;
      animation: kys-wa 2.5s ease-in-out infinite;
      transition: .25s
    }

    .kys-whatsapp:hover {
      transform: scale(1.1)
    }

    .kys-whatsapp svg {
      width: 39px;
      height: 39px;
      fill: currentColor
    }

    @keyframes kys-wa {

      0%,
      100% {
        translate: 0 0
      }

      50% {
        translate: 0 -8px
      }
    }

    .kys-chat-launcher {
      position: fixed;
      right: 25px;
      bottom: 105px;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 1px solid #00f0ff80;
      background: #00f0ff;
      color: #031014;
      z-index: 99989;
      cursor: pointer;
      display: grid;
      place-items: center;
      box-shadow: 0 0 28px #00f0ff4d
    }

    .kys-chat {
      position: fixed;
      right: 24px;
      bottom: 175px;
      width: 370px;
      height: 500px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid #00f0ff33;
      border-radius: 20px;
      background: #080d16f7;
      z-index: 99991;
      box-shadow: 0 25px 70px #0008;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px) scale(.97);
      transition: .25s
    }

    .kys-chat.open {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .kys-chat header {
      display: flex;
      justify-content: space-between;
      padding: 15px 16px;
      border-bottom: 1px solid #fff1;
      color: #fff
    }

    .kys-chat header b {
      display: block
    }

    .kys-chat header small {
      color: #7f91a3;
      font-size: 10px
    }

    .kys-chat header button {
      background: none;
      border: 0;
      color: #8d9aac;
      cursor: pointer
    }

    .kys-chat-messages {
      flex: 1;
      overflow: auto;
      padding: 17px
    }

    .kys-message {
      max-width: 82%;
      padding: 10px 12px;
      margin-bottom: 10px;
      border-radius: 13px;
      font-size: 13px;
      line-height: 1.5
    }

    .kys-message.bot {
      background: #141c2a;
      color: #dce4ed
    }

    .kys-message.user {
      margin-left: auto;
      background: #00f0ff;
      color: #041014
    }

    .kys-quick {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .kys-quick button {
      background: #00f0ff0d;
      border: 1px solid #00f0ff40;
      color: #00f0ff;
      border-radius: 99px;
      padding: 7px 9px;
      font-size: 10px;
      cursor: pointer
    }

    .kys-chat form {
      display: flex;
      gap: 7px;
      padding: 10px;
      border-top: 1px solid #fff1
    }

    .kys-chat input {
      flex: 1;
      border: 1px solid #fff2;
      background: #111927;
      color: #fff;
      border-radius: 11px;
      padding: 11px;
      outline: 0
    }

    .kys-chat form>button {
      width: 42px;
      border: 0;
      border-radius: 11px;
      background: #00f0ff;
      color: #041014;
      cursor: pointer
    }

    @media(max-width:520px) {
      .kys-whatsapp {
        right: 14px;
        bottom: 17px;
        width: 58px;
        height: 58px
      }

      .kys-chat-launcher {
        right: 14px;
        bottom: 88px;
        width: 53px;
        height: 53px
      }

      .kys-chat {
        right: 12px;
        bottom: 153px;
        width: calc(100vw - 24px);
        height: min(500px, calc(100vh - 180px))
      }
    }