@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
      --color-primary: #009bc5;
      --color-primary-hover: #0082a9;
      --color-secondary: #3479df;
      --color-dark: #080f1c;
      --color-light: #f0f5f9;
      --color-white: #ffffff;
      --color-black: #000;
      --color-text: #404040;
      --color-text-muted: #64676d;
      --color-border: #dedfe3;
      --color-background: #ffffff;
      --color-accent: #4bcfe7;
      --color-heading-dark: #111027;
      --color-hero-copy: #e5e8ed;
      --color-hero-border: #263347;
      --color-hero-glow: #144354;
      --color-solutions-bottom: #f0f1f5;
      --color-placeholder: #e8ecef;
      --color-placeholder-light: #f0f2f4;
      --color-placeholder-dark: #102135;
      --color-placeholder-blue: #265281;
      --color-placeholder-avatar: #e7ebef;
      --color-placeholder-news: #89939c;
      --color-placeholder-news-dark: #303842;
      --color-quote: #cecece;
      --color-testimonial-start: #02162f;
      --color-testimonial-end: #062653;
      --color-testimonial-glow: #145284;
      --color-consultation: #d4e2fc;
      --color-consultation-glow: #89ddf1;
      --color-ai-start: #112745;
      --color-ai-end: #2b60aa;
      --color-footer: #efefef;
      --color-audit: #008eb8;
      --color-audit-navy: #010e3b;
      --color-news-title: #8edcf1;
      --color-icon-lilac: #d2afe7;
      --color-icon-green: #84ad63;
      --color-icon-sand: #d7b889;
      --color-icon-sky: #74c9e7;
      --color-icon-purple: #654bef;
      --color-icon-pink: #d795b1;
      --color-icon-violet: #af7acb;
      --color-icon-pale: #a2c8e2;
      --color-overlay: rgba(0, 0, 0, 0.9);
      --color-overlay-top: rgba(0, 0, 0, 0.82);
      --color-control: rgba(0, 10, 22, 0.72);
      --color-shadow: rgba(40, 98, 125, 0.1);
      --color-shadow-active: rgba(0, 155, 197, 0.22);
      --color-transparent: transparent;
      --font-heading:"Poppins", sans-serif;
      --font-body: "Roboto", sans-serif;
      --site-width: 1530px;
      --bs-body-font-family: var(--font-body);
      --bs-body-color: var(--color-text);
      --bs-body-bg: var(--color-background);
      --bs-border-color: var(--color-border);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: 18px; line-height: 1.5; }
    main { overflow: clip; }
    h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
    p{line-height: 1.6;}
    h1, h2 { font-family: var(--font-heading); color: var(--color-black); font-weight: 600; }
    h2 { font-size: 50px; line-height: 1.5; letter-spacing: -0.55px; }
    h3 { color: var(--color-black); font-size: 18px; line-height: 1.35; font-weight: 600; }
    a { color: inherit; text-decoration: none; font-family: var(--font-body);}
    button { font: inherit; }
    img { display: block; max-width: 100%; }
    svg { display: block; }
    section, article[id], footer { scroll-margin-top: 24px; }
    a, button { -webkit-tap-highlight-color: var(--color-transparent); }
    a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 5px; }
    .container { --bs-gutter-x: 24px; width: 100%; max-width: calc(var(--site-width) + 24px); }
    .icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
    .media-placeholder { background: var(--color-placeholder); object-fit: cover; }
    .gradient-text { color: var(--color-primary); background: linear-gradient(100deg, var(--color-primary), var(--color-secondary)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--color-transparent); }
    .section-copy { font-size: 18px; line-height: 1.3; }
    .section-title-centered { text-align: center; }
    .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 18px; background: var(--color-white); color: var(--color-dark); transform: translateY(-160%); }
    .skip-link:focus { transform: translateY(0); }
    .btn {position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 7px; padding: 12px 19px; font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.4; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
    .btn-brand {   color: var(--color-white); background: var(--color-primary); border: 1px solid var(--color-primary); position: relative; overflow: hidden; isolation: isolate;--bs-btn-color: var(--color-white); --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-color: var(--color-white); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover); --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-color: var(--color-white); --bs-btn-active-border-color: var(--color-primary-hover); color: var(--color-white); background: var(--color-primary); border: 1px solid var(--color-primary); }
    .btn::before {content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; z-index: -1; }
    .btn:hover::before {left: 140%; }

    .btn-outline-brand { color: var(--color-black); border: 1px solid var(--color-black); background: var(--color-transparent); }
    .btn-outline-brand:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-transparent); }
    .arrow-disc {transform: rotate(0deg); transition: all 0.6s ease; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-white); background: linear-gradient(125deg, var(--color-accent), var(--color-secondary)); border-radius: 50%; }
    .arrow-disc .icon { width: 13px; height: 13px; stroke-width: 2; }
    .btn:hover .arrow-disc{transform: rotate(45deg); transition: all 0.6s ease;}
    .arrow-disc-white { color: var(--color-black); background: var(--color-white); }
    .slider-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1.5px solid var(--color-border); border-radius: 50%; background: var(--color-transparent); color: var(--color-black); transition: color 180ms ease, background-color 180ms ease; }
    .slider-arrow .icon { width: 20px; height: 20px; }
    .slider-arrow:hover { color: var(--color-white); border-color: var(--color-primary); }
    .slider-arrow:disabled { border-color: var(--color-border); color: var(--color-text-muted); cursor: default; background: var(--color-transparent); }
    .swiper { width: 100%; }
    .swiper-slide { height: auto; }
    .swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; gap: 24px; }
    .swiper:not(.swiper-initialized) .swiper-slide { width: auto; min-width: 0; }
    .solutions-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .testimonials-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brands-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .cases-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

    /* Desktop measurements follow the supplied 1444px-wide reference. */
    .hero-shell {position: relative; overflow: clip; color: var(--color-white); background: var(--color-dark); --glow-x: 0px; --glow-y: 0px; }
    .hero-shell::before {content: ""; position: absolute; width: 650px; height: 600px; left: -300px; top: 5%; background: radial-gradient(ellipse, rgba(31, 135, 172, 0.75) 0%, rgba(31, 135, 172, 0.4) 35%, rgba(31, 135, 172, 0.12) 55%, transparent 72% ); pointer-events: none; z-index: 0; transform: translate3d(var(--glow-x), var(--glow-y), 0) scale(1.2); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } 
    .hero-shell::after {content: ""; position: absolute; width: 650px; height: 600px; right: -300px; bottom: 5%; background: radial-gradient(ellipse, rgba(31, 135, 172, 0.75) 0%, rgba(31, 135, 172, 0.4) 35%, rgba(31, 135, 172, 0.12) 55%, transparent 72%); pointer-events: none; z-index: 0; transform: translate3d(var(--glow-x), var(--glow-y), 0) scale(1.2); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }

    .hero-shell > .container {position: relative; z-index: 1; }
    /*.site-header { background: var(--color-dark); }*/
    .site-header{position: absolute; top: 0; width: 100%; z-index: 9;}
    .site-header .navbar { min-height: 130px; padding: 0; }
    .site-header .navbar-brand { width: 180px; padding: 0; margin: 0 80px 0 0; }
    .brand-placeholder { width: 180px; height: 70px; }
    .site-header .navbar-nav { width: 620px; align-items: center; justify-content: space-between; }
    .site-header .nav-link { position: relative; padding: 9px 8px; color: var(--color-white); font-size: 18px; line-height: 24px; }
    .site-header .nav-link:hover, .site-header .nav-link.active { color: var(--color-primary); }
    .site-header .nav-link.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-primary); content: ""; }
    .site-header .nav-link {position: relative; }
    .site-header .nav-link::after {content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-primary); /* Start at 0% */ transform: scaleX(0); transform-origin: center; transition: transform 0.35s ease; }
    .site-header .nav-link:hover::after,
    .site-header .nav-link.active::after {transform: scaleX(1); }
    .appointment-btn {min-height: 47px; padding: 5px 10px; margin-left: auto; gap: 10px; }
    .appointment-icon { display: flex; align-items: center; padding-left: 10px; min-height: 33px; border-left: 1px solid var(--color-white); }
    .appointment-icon .icon { width: 27px; height: 27px; stroke-width: 1.3; }
    .navbar-toggler { padding: 9px; width: 44px; height: 42px; border: 1px solid var(--color-hero-border); border-radius: 5px; color: var(--color-white); }
    .navbar-toggler:focus { box-shadow: none; }
    .menu-line { display: block; width: 24px; height: 2px; margin: 4px 0; background: var(--color-white); transition: transform 180ms ease, opacity 180ms ease; }
    .navbar-toggler[aria-expanded="true"] .menu-line:first-child { transform: translateY(6px) rotate(45deg); }
    .navbar-toggler[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; }
    .navbar-toggler[aria-expanded="true"] .menu-line:last-child { transform: translateY(-6px) rotate(-45deg); }
    .hero-section { padding: 20px 0 62px; min-height: 100vh;display: flex;align-items: center; position: relative;}
    .hero-content {text-align: center;}
    .hero-section video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; }
    .hero-section .container {margin-top: 100px; }
    .hero-section .light-color{color: var(--color-primary); font-weight: 400;}

    .hero-title { color: var(--color-white); font-size: 60px; font-weight: 700; line-height: 1.4; letter-spacing: -0.6px; }
    .hero-title span { display: block; }
    .hero-copy { color: var(--color-hero-copy); font-size: 18px; line-height: 30px; max-width: 800px; margin: 0 auto; margin-top: 26px; margin-bottom:50px; }
    .hero-divider { position: relative; width: 438px; max-width: 88%; height: 2px; margin: 34px 0 48px; background: var(--color-primary); }
    .hero-divider::before { position: absolute; right: 100%; width: 50vw; height: 2px; background: var(--color-primary); content: ""; }
    .hero-divider::after { position: absolute; top: -5px; right: -6px; width: 12px; height: 12px; background: var(--color-primary); border-radius: 50%; content: ""; }
    .hero-actions { display: flex; align-items: center; gap: 25px; justify-content: center;}
    .hero-actions .btn-brand { min-width: 180px; }
    .hero-discover { min-width: 151px; padding: 12px 13px; border: 1px solid var(--color-hero-border); color: var(--color-white); }
    .hero-discover:hover { color: var(--color-white); border-color: var(--color-primary); }
    .hero-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--color-placeholder-dark); }
    .hero-media > img { width: 100%; height: 100%; background: var(--color-placeholder-dark); }
    .video-controls { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 12px; }
    .media-control { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--color-white); background: var(--color-control); }
    .media-control:disabled { opacity: 1; cursor: not-allowed; }
    .media-control .icon { width: 26px; height: 26px; }
    .hero-decoration-placeholder { position: absolute; right: 0; bottom: 0; width: 490px; height: 175px; pointer-events: none; }
    .hero-decoration-placeholder {position: absolute; right: 0; bottom: 0; width: 490px; height: 175px; pointer-events: none; transform: scale(0); transform-origin: bottom right; animation: heroDecorationReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      @keyframes heroDecorationReveal {
        0% {
          transform: scale(0);
        }
        80% {
          transform: scale(1.04);
        }
        100% {
          transform: scale(1);
        }
      }
    .solutions-section { padding: 64px 0 76px; background: linear-gradient(var(--color-white), var(--color-solutions-bottom)); }
    .solutions-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 150px; min-height: 133px; }
    .solutions-intro h2 span { display: block; }
    .solutions-description { padding-top: 6px; }
    .solutions-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }
    .solutions-next { border-color: var(--color-border); }
    .solutions-slider { margin-top: 30px; }
    .solution-icon { width: 58px; height: 64px; margin-bottom: 16px; color: var(--color-primary); stroke-width: 1.35; }
    .solution-card h3 { margin-bottom: 15px; color: var(--color-primary); font-size: 20px; line-height: 24px; font-weight: 700; }
    .solution-card p { font-size: 18px; margin-bottom: 25px; }
    .solution-link { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; margin-top: auto; padding-top: 12px; color: var(--color-black); font-size: 12px; font-weight: 600; }
    .solution-link:hover { color: var(--color-primary); }
    .solution-card .card-icon{width: 55px;height: 55px; margin-bottom: 25px;}
    .solution-card .card-icon img{width: 100%; height: 100%; object-fit: contain;}
    .solution-link:hover .arrow-disc{transform: rotate(45deg); transition: all 0.6s ease;}
    .solution-card::after {content: ""; position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); left: 2px; top: 2px; transform: 0; background: #ffffff; opacity: 1; pointer-events: none; z-index: -1; transition: opacity 0.4s ease; border-radius: 8px;; }
    .solution-card {display: flex; flex-direction: column; height: auto; padding: 24px 14px; border-radius: 9px; background: var(--color-white); position: relative; overflow: hidden; isolation: isolate; transition: background-color 0.4s ease, color 0.4s ease; }
    .solution-card::before {content: ""; background: var(--color-primary); width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; }
    .solution-card:hover::after {width: calc(100% - 6px); height: calc(100% - 6px);}
    .solution-card:hover::before {content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(120deg, var(--color-primary), #62d8ff, #ffffff, var(--color-primary), #62d8ff, var(--color-primary) ); background-size: 400% 400%; background-position: 0% 50%; z-index: -1; opacity: 1; animation: movingBorder 4s ease-in-out infinite; }
    @keyframes movingBorder {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .brands-section { padding: 54px 0 57px; }
    .brands-heading { position: relative; display: flex; justify-content: center; }
    .brands-heading::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--color-placeholder); content: ""; }
    .brands-heading h2 { position: relative; width: 452px; min-height: 44px; padding: 8px 24px; border: 1px solid var(--color-border); border-radius: 30px; background: var(--color-white); font-family: var(--font-body); font-size: 20px; line-height: 26px; letter-spacing: 0; text-align: center; }
    .brands-slider { margin: 28px auto 0; padding: 0 24px; }
    .brand-slide { display: flex; align-items: center; justify-content: center; height: 66px; }
    .client-logo-placeholder { width: 150px; height: 56px; object-fit: contain; }
    .client-logo-tall { width: 102px; height: 60px; }
    .client-logo-small { width: 114px; height: 38px; }
    .case-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 43px; padding-bottom: 39px; }
    .case-heading h2 { line-height: 54px; }
    .case-heading .btn { padding-right: 11px; padding-left: 11px; }
    
    .case-study {position: relative; aspect-ratio: 12 / 13; overflow: hidden; background: var(--color-placeholder); animation: caseStudyFade 0.8s ease-out both; }
    .case-study img {width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
    .case-study a::after {position: absolute; top: 0; right: 0; left: 0; height: 110px; background: linear-gradient(var(--color-overlay-top), var(--color-transparent)); content: ""; transition: opacity 0.6s ease; }
    .case-study h3 {position: absolute; z-index: 1; top: 28px; right: 10px; left: 10px; color: var(--color-white); font-size: 18px; font-weight: 600; text-align: center; transition: transform 0.6s ease, opacity 0.6s ease; }
    .case-study:hover img {transform: scale(1.05); }
    .case-study a{position: relative;}
    .case-study:hover h3 {transform: translateY(4px); }
    .case-study:hover::after {opacity: 0.85; }
    @keyframes caseStudyFade {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

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



    .testimonials-section {overflow-y: hidden; position: relative; padding: 53px 0 40px; background: radial-gradient(ellipse at 97% 35%, var(--color-testimonial-glow), var(--color-transparent) 48%), linear-gradient(120deg, var(--color-testimonial-start), var(--color-testimonial-end)); }
    .testimonials-section::before {content: ""; box-sizing: border-box; position: absolute; width: 794px; height: 100%; left: -26%; top: 0; border: 60px solid rgba(0, 65, 126, 0.6); border-radius: 900px; animation: testimonialShape1 8s ease-in-out infinite; }
    .testimonials-section::after {content: ""; box-sizing: border-box; position: absolute; width: 908px; height: 908px; left: -29%; top: 50%; transform: translate(0, -50%); border-radius: 900px; border: 60px solid rgba(0, 40, 97, 0.6); animation: testimonialShape2 10s ease-in-out infinite; }

@keyframes testimonialShape1 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(18px, 12px, 0) rotate(1.5deg);
    }
}

@keyframes testimonialShape2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(-15px, -8px, 0) rotate(-1.5deg);
    }
}



    .testimonials-section h2 { margin-bottom: 36px; color: var(--color-white); }
    .testimonial-card { display: flex; flex-direction: column; height: auto; padding: 24px 30px 26px; border-radius: 9px; color: var(--color-black); background: var(--color-white); }
    .testimonial-card.swiper-slide-active { color: var(--color-white); background: var(--color-primary); }
    .testimonial-quote { display: block; height: 32px; margin-bottom: 11px; color: var(--color-quote); font-family: Georgia, serif; font-size: 57px; font-weight: 700; line-height: 1; }
    .testimonial-card blockquote { font-size: 16px; line-height: 1.6; }
    .testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 15px; }
    .testimonial-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--color-placeholder-avatar); }
    .testimonial-person h3 { color: inherit; font-size: 15px; font-weight: 700; line-height: 23px; }
    .testimonial-person p { font-size: 12px; line-height: 20px; }
    .testimonial-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 66%; margin: 41px 0 0 auto; }
    .testimonial-controls::before { flex: 1; height: 1px; margin-right: 8px; background: var(--color-primary); content: ""; }
    .testimonial-controls .slider-arrow { width: 34px; height: 34px; color: var(--color-primary); border-width: 2px; padding:7px; }
    .testimonial-controls .slider-arrow:hover { color: var(--color-white); }
    .testimonial-controls .icon { width: 25px; height: 25px; stroke-width: 1.8; }

    .services-section { position: relative; padding: 74px 0 82px; }
    .services-section > img {position: absolute; bottom: 0; right: 0; z-index: -1; max-width:44%; }
    .services-row { --bs-gutter-x: 0; align-items: flex-start; }
    .services-copy-column { width: 42.4%; padding-right: 54px; }
    .services-copy-column h2 { color: var(--color-heading-dark); line-height: 56px; }
    .services-copy-column .section-copy { margin-top: 24px; }
    .services-copy-column .btn { min-width: 180px; margin-top: 30px; }
    .services-grid-column { width: 57.6%; }
    .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 100%; padding-left:16%; }
    .service-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 163px; padding: 16px; border: 1px solid var(--color-placeholder); border-radius: 16px; background: var(--color-white); box-shadow: 0 0 22px var(--color-shadow); text-align: center; transition: border-color 180ms ease, box-shadow 180ms ease; }
    .service-tile-featured, .service-tile:hover { border-color: var(--color-primary); box-shadow: 0 0 20px var(--color-shadow-active); }
    .service-tile .icon { width: 32px; height: 32px; margin-bottom: 8px; stroke-width: 1.4; }
    .service-tile h3 { margin-bottom: 7px; color: var(--color-heading-dark); font-size: 20px; font-weight: 500; }
    .service-tile p { color: var(--color-text); font-size: 16px; line-height: 1.6; }
    .icon-lilac { color: var(--color-icon-lilac); }
    .icon-green { color: var(--color-icon-green); }
    .icon-sand { color: var(--color-icon-sand); }
    .icon-sky { color: var(--color-icon-sky); }
    .icon-purple { color: var(--color-icon-purple); }
    .icon-pink { color: var(--color-icon-pink); }
    .icon-violet { color: var(--color-icon-violet); }
    .services-decoration-placeholder { position: absolute; right: 0; bottom: 0; z-index: -1; width: 780px; height: 330px; pointer-events: none; }
    .service-tile .icon-box {margin-bottom: 15px; }


    .consultation-section { min-height: 275px; padding: 40px 0; background: radial-gradient(ellipse 190px 240px at 27% 0%, var(--color-consultation-glow), var(--color-transparent)), radial-gradient(ellipse 150px 180px at 94% 100%, var(--color-consultation-glow), var(--color-transparent)), var(--color-consultation); }
    .consultation-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 265px; gap: 48px; align-items: center; min-height: 195px; }
    .consultation-media { position: relative; height: 195px; padding-right: 66px; }
    .consultation-media img { width: 254px; height: auto; }
    .consultation-media::before { position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: linear-gradient(var(--color-secondary), var(--color-primary)); content: ""; }
    .consultation-media::after { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 195px 0 var(--color-primary); content: ""; }
    .consultation-copy h2 { color: var(--color-black); font-size: 50px; font-weight: 700; line-height: 48px; letter-spacing: -0.35px; }
    .consultation-copy h2 .consultation-title-line { white-space: nowrap; }
    .consultation-copy p { margin-top: 8px; color: var(--color-black); font-size: 18px; line-height: 22px; }
    .consultation-cta { padding: 12px 16px; }

    .consultation-media img {animation: robotFloat 4s ease-in-out infinite; transform-origin: center; }
      @keyframes robotFloat {
          0%,
          100% {
              transform: translateY(0) rotate(0deg);
          }

          50% {
              transform: translateY(-12px) rotate(1.5deg);
          }
      }

    .ai-value-section {position: relative; padding: 46px 0 50px; border-radius: 24px 24px 0 0; background: linear-gradient(var(--color-ai-start), var(--color-ai-end)); }
    .ai-value-section > img {position: absolute; top: 50%; transform: translate(0px, -50%); left: 0; max-width: 36%; opacity: .2; }
    .ai-value-section h2 { color: var(--color-white); }
    .ai-layout { position: relative; height: auto; margin-top: 40px; z-index: 1;}
    .ai-art {top: 10px; left: 40px; width: 100%; height: auto; max-width: 600px; position:relative; }
    .ai-layout::before {content: ""; position: absolute; width: 597px; height: 597px; left: calc(45% - 597px / 2 - 238.5px); top: 0; background: radial-gradient(50% 50% at 50% 50%, #0090DA 65.38%, rgba(0, 144, 218, 0) 100% ); border-radius: 10px; z-index: -1; opacity: 0.7; animation: aiGlow 6s ease-in-out infinite; }
    @keyframes aiGlow {
        0%,
        100% {
            opacity: 0.6;
            transform: scale(1);
        }

        50% {
            opacity: 0.72;
            transform: scale(1.15);
        }
      }
    .ai-benefits { position: absolute; top: 18px; right: 0; left: 47%; list-style: none; padding: 0; }
    .ai-connector { position: absolute; top: 0; left: 0; width: 147px; height: 537px; color: var(--color-white); fill: none; stroke: currentColor; stroke-width: 6; }
    .ai-benefit { position: relative; display: flex; align-items: center; gap: 40px; height: 100px; margin-bottom: 10px;}
    .ai-benefit:nth-of-type(2), .ai-benefit:nth-of-type(4) { margin-left: 84px; }
    .ai-benefit:nth-of-type(3) { margin-left: 114px; }
    .ai-benefit-icon {padding: 19px; display: grid; place-items: center; width: 80px; height: 80px; flex: 0 0 80px; border: 2px solid var(--color-white); border-radius: 50%; color: var(--color-white); background: linear-gradient(100deg, var(--color-primary), var(--color-secondary)); }
    .ai-benefit-icon .icon { width: 43px; height: 43px; stroke-width: 1.6; }
    .ai-benefit h3 { color: var(--color-accent); font-size: 25px; margin-bottom: 5px; line-height: 28px; font-weight: 700; }
    .ai-benefit p { color: var(--color-hero-copy); font-size: 20px; line-height: 24px; }
    .ai-benefit {animation: benefitFloat 4s ease-in-out infinite; }
    .ai-benefit:nth-child(2) {animation-delay: 0s; }
    .ai-benefit:nth-child(3) {animation-delay: 0.3s; }
    .ai-benefit:nth-child(4) {animation-delay: 0.6s; }
    .ai-benefit:nth-child(5) {animation-delay: 0.9s; }
    .ai-benefit:nth-child(6) {animation-delay: 1.2s; }
    @keyframes benefitFloat {
        0%,
        100% {
            transform: translateY(0);
        }

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

    .iot-section { padding: 32px 0 51px; }
    .iot-layout { --bs-gutter-x: 0; align-items: center; margin-top: 45px; min-height: 340px; }
    .iot-list-column { width: 34.7%; padding-right: 23px; border-right: 1px solid var(--color-placeholder); }
    .iot-features { display: grid; gap: 23px; padding: 0; list-style: none; }
    .iot-features li { display: flex; align-items: flex-start; gap: 13px; }
    .iot-features .icon { width: 23px; height: 25px; margin-top: 1px; stroke-width: 1.5; }
    .iot-features h3 {margin-bottom: 5px; font-size: 18px; font-weight: 600; line-height: 22px; }
    .iot-features p { font-size: 16px; line-height: 20px; }
    .iot-diagram-column { width: 65.3%; padding-left: 47px; }
    .iot-diagram { width: 100%; height: 340px; background: var(--color-placeholder-light); }

    .growth-section { padding: 55px 0; background: var(--color-light); }
    .growth-layout { display: grid; grid-template-columns: 260px 600px minmax(0, 1fr); gap: 18px; align-items: stretch; }
    .growth-first { display: grid; gap: 24px; }
    .growth-stat { position: relative; overflow: hidden; padding: 18px 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); }
    .growth-number { display: block; color: var(--color-black); font-size: 50px; font-weight: 600; line-height: 48px; }
    .growth-stat p { font-family: var(--font-heading); font-size: 16px; line-height: 18px; }
    .growth-projects { color: var(--color-white); border-color: var(--color-transparent); background: linear-gradient(100deg, var(--color-icon-sky), var(--color-primary)); }
    .growth-projects .growth-number { color: var(--color-white); }
    .growth-projects .icon {position: absolute; right: 25px; bottom: -5px; width: 60px; height: 56px; stroke-width: 1; }
    .growth-cooperation { display: flex; align-items: center; gap: 13px; padding: 16px 13px; }
    .growth-cooperation .growth-number { color: var(--color-primary); }
    .growth-credentials { overflow: hidden; border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-white); display: flex; flex-direction: column; justify-content: center; }
    .certification-block { display: flex; align-items: center; justify-content: space-between; height: 157px; padding: 24px; border-bottom: 1px solid var(--color-border); }
    .certification-block > .icon { width: 79px; height: 83px; color: var(--color-icon-pale); stroke-width: 1.2; }
    .certification-block p { width: 210px; color: var(--color-black); font-size: 20px; line-height: 23px; font-weight: 500; }
    .certification-block small { display: block; margin-top: 4px; color: var(--color-text); font-size: 16px; font-weight: 400; }
    .countries-block { position: relative; display: flex; align-items: center; justify-content: space-between; height: 165px; padding: 23px; }
    .countries-block p { font-family: var(--font-heading); font-size: 18px; }
    .globe-placeholder { width: 120px; height: 120px; border-radius: 50%;}
    .growth-right { min-width: 0; padding-left: 18px; }
    .growth-right h2 {max-width: 100%; font-size: 50px; line-height: 1.3; margin-bottom: 19px; }
    .growth-small-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 500px; margin-top: 14px; }
    .growth-small-stats .growth-stat { height: 150px; padding: 12px 23px; }
    .growth-satisfaction .growth-number { color: var(--color-primary); }
    .growth-satisfaction p { max-width: 80px; }
    .growth-satisfaction .icon { position: absolute; right: 18px; bottom: 10px; width: 53px; height: 56px; color: var(--color-quote); stroke-width: 1.2; }
    .growth-clients { display: flex; align-items: flex-end; gap: 9px; padding-bottom: 22px !important; }
    .growth-clients > .icon { position: absolute; top: 23px; left: 73px; width: 44px; height: 40px; color: var(--color-icon-pale); stroke-width: 1.2; }
    .growth-clients p { margin-bottom: 7px; }

    .news-section { padding-top: 68px; }
    .news-section h2 { margin-bottom: 46px; }
    .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .news-card a { position: relative; display: flex; align-items: flex-end; min-height: 600px; overflow: hidden; border-radius: 9px; background: var(--color-placeholder-news); }
    .news-card-featured { grid-column: span 2;}
    .news-image { position: absolute; inset: 0; width: 100%; height: 100%; background: inherit; object-fit: cover;}
    .news-card a::after { position: absolute; inset: 0; background: linear-gradient(var(--color-transparent) 30%, var(--color-overlay) 100%); content: ""; }
    .news-card-dark a::after { background: linear-gradient(rgb(0 10 22 / 8%), rgb(0 0 0 / 80%)); }
    .news-content { position: relative; z-index: 1; width: 100%; padding: 16px 15px 20px; }
    .news-date { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; margin-bottom: 7px; padding: 5px 7px; border: 1px solid var(--color-icon-sky); border-radius: 6px; color: var(--color-white); font-size: 14px; line-height: 18px; }
    .news-date strong { font-size: 16px; font-weight: 600; }
    .news-content h3 { margin-bottom: 7px; color: var(--color-news-title); font-size: 24px; font-weight: 500; line-height: 1.3; }
    .news-content p { color: var(--color-hero-copy); font-size: 16px;}
    .news-card-featured .news-content { max-width: 90%; }
    .news-arrow { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid var(--color-icon-sky); border-radius: 50%; background: var(--color-white); color: var(--color-primary); }
    .news-arrow .icon { width: 23px; height: 23px; }
    .news-card-dark .news-arrow { border-color: var(--color-white); color: var(--color-white); background: var(--color-primary); }
    .news-card a {transition: transform 0.5s ease, box-shadow 0.5s ease; }
    .news-card:hover a {transform: translateY(-6px); box-shadow: 0 18px 40px rgb(0 0 0 / 15%); }
    .news-image {transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
    .news-card:hover .news-image {transform: scale(1.06); }
    .news-content {transition: transform 0.5s ease; }
    .news-card:hover .news-content {transform: translateY(-5px); }
    .news-arrow {transition: transform 0.4s ease, background-color 0.4s ease, color 0.4s ease; }
    .news-card:hover .news-arrow {transform: rotate(45deg) scale(1.08); }
    .news-arrow img {transition: transform 0.4s ease; }
    .news-card:hover .news-arrow img {transform: rotate(-45deg); }




    .audit-section { position: relative; margin-top: 80px; overflow: hidden;}
    .audit-section::before { position: absolute; inset: 40px 0; background: var(--color-audit); content: ""; }
    .audit-layout { position: relative; min-height: 500px; }
    .audit-photo { position: absolute; top: 120px; left: max(-124px, calc((1152px - 100vw) / 2 + 24px)); width: 328px; height: 264px; border: 8px solid var(--color-audit); background: var(--color-placeholder); }
    .audit-text h2 { margin-bottom: 14px; color: var(--color-white); font-size: 50px; line-height: 56px; }
    .audit-text p { color: var(--color-hero-copy); font-size: 18px; line-height: 1.6; }
    .audit-text .btn { margin-top: 23px; padding: 12px; }
    .audit-text .btn .icon { width: 18px; height: 18px; }
    .audit-offerings { position: absolute; top: 103px; right: 0; display: grid; gap: 22px; width: 330px; list-style: none; padding: 0; }
    .audit-offerings li { display: flex; align-items: center; gap: 26px; min-height: 32px; color: var(--color-white); font-family: var(--font-heading); font-size: 22px; line-height: 24px; }
    .audit-offerings .icon { width: 32px; height: 32px; stroke-width: 1.8; }
    .audit-panel {position: relative; max-width: 1100px; width: 100%; min-height: 500px; padding: 103px 34px 80px 238px; color: var(--color-white); background: var(--color-audit-navy); isolation: isolate; }
    .audit-panel::before {content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--color-secondary) 0%, rgba(98, 216, 255, 0.35) 35%, transparent 70% ); left: 50%; bottom: -250px; filter: blur(12px); opacity: 0.9; animation: auditGlowMove 7s ease-in-out infinite; z-index: -1; }
    @keyframes auditGlowMove {
        0% {
            transform: translate(-50%, 0) scale(0.85);
        }
        25% {
            transform: translate(-30%, -30px) scale(1);
        }
        50% {
            transform: translate(-50%, -60px) scale(1.15);
        }
        75% {
            transform: translate(-70%, -30px) scale(1);
        }
        100% {
            transform: translate(-50%, 0) scale(0.85);
        }
    }








    .company-section { padding: 92px 0 86px; }
    .company-layout { display: grid; grid-template-columns: 40% 30% 30%; margin-top: 64px; }
    .company-intro { padding: 28px 46px 0 0; color: var(--color-black); font-size: 18px; line-height: 26px; }
    .company-intro > a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
    .company-principle { padding: 24px 30px 0 48px; border-left: 1px solid var(--color-border); }
    .company-principle h3 { display: flex; align-items: center; gap: 16px; margin-bottom: 27px; color: var(--color-primary); font-size: 28px; font-weight: 600; line-height: 40px; }
    .company-principle h3 .icon { width: 40px; height: 40px; stroke-width: 1.7; }
    .company-principle ul { padding-left: 18px; color: var(--color-black); font-size: 18px; list-style: disc; }
    .company-action { padding-right: 0; }
    .company-principle img {max-width: 40px; }

    .site-footer { background: var(--color-footer); color: var(--color-black); }
    .footer-main { padding: 45px 0 25px; }
    .footer-grid { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gap: 24px; }
    .footer-logo { width: 180px; height: 72px; background: var(--color-placeholder); }
    .footer-social { margin-top: 31px; }
    .footer-social h3, .footer-column h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin-bottom:15px; }
    .social-links { display: flex; gap: 8px; margin-top: 13px; }
    .social-link { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--color-white); background: var(--color-primary); }
    .social-link:disabled { opacity: 1; cursor: not-allowed; }
    .social-link .icon { width: 17px; height: 17px; stroke-width: 1.6; }
    .social-letter { font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1; }
    .social-linkedin { font-size: 13px; }
    .footer-column { padding-top: 8px; }
    .footer-column h3 { margin-bottom: 13px; }
    .footer-links { display: grid; gap: 8px; padding: 0; font-size: 18px; line-height: 19px; list-style: none; font-weight:300; }
    .footer-links a:hover, .contact-list a:hover { color: var(--color-primary); }
    .contact-list { display: grid; gap: 10px; padding: 0; list-style: none; }
    .contact-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 18px; line-height: 1.6; font-weight: 300;}
    .contact-list .icon { width: 18px; height: 20px; flex: 0 0 18px; color: var(--color-primary); stroke-width: 1.5; }
    .contact-list address { margin: 0; font-style: normal; }
    .contact-phone { margin-top: 16px; }
    .contact-list a { overflow-wrap: anywhere; }
    .copyright { margin-top: 0; padding: 13px 20px; background: linear-gradient(100deg, var(--color-primary), var(--color-secondary)); color: var(--color-white); font-family: var(--font-heading); font-size: 14px; line-height: 20px; text-align: center; }





/*==========responsive design==========*/

    @media (max-width: 1699px) {
        .container {max-width: 1300px; }
        .hero-title {font-size: 50px; }
        h2 {font-size: 40px; }
        .consultation-copy h2,
        .growth-right h2,
        .audit-text h2 {font-size: 40px; }
        .audit-panel {max-width: 68%; }
      }

    @media (max-width: 1200px) {
      .container { padding-right: 28px; padding-left: 28px; }
      h2 { font-size: 34px; }
      .desktop-break { display: none; }
      .site-header .navbar { min-height: 110px; }
      .site-header .navbar-brand { width: 160px; margin-right: 24px; }
      .brand-placeholder { width: 160px; height: 62px; }
      .site-header .navbar-nav { width: auto; flex: 1; gap: 15px; margin-right: 24px; }
      .site-header .nav-link { padding-right: 4px; padding-left: 4px; font-size: 13px; }
      .appointment-btn { width: 198px; font-size: 13px; }
      .hero-section { padding-top: 28px; }
      .hero-layout { grid-template-columns: 45% minmax(0, 1fr); gap: 26px; }
      .hero-title { font-size: 41px; line-height: 1.48; }
      .hero-copy { font-size: 16px; line-height: 28px; }
      .hero-divider { margin-top: 28px; margin-bottom: 38px; }
      .hero-media-column { padding-top: 48px; }
      .solutions-intro { gap: 38px; }
      .solutions-description .section-copy { font-size: 18px; }
      .solutions-controls { margin-top: 6px; }
      .case-heading h2 { font-size: 32px; line-height: 45px; }
      .case-study h3 { font-size: 16px; }
      .services-copy-column { padding-right: 38px; }
      .services-copy-column h2 { line-height: 1.5; }
      .service-grid { gap: 20px; }
      .service-tile { padding: 14px; }
      .consultation-layout { grid-template-columns: 26% minmax(0, 1fr) 200px; gap: 26px; }
      .consultation-media { padding-right: 30px; }
      .consultation-media img { width: 100%; object-fit: cover; }
      .consultation-copy h2 { font-size: 30px; line-height: 42px; }
      .consultation-cta { font-size: 12px; }
      .ai-art { left: 0; width: 45%; }
      .ai-benefits { left: 46%; }
      .ai-benefit { gap: 24px; }
      .ai-benefit h3 { font-size: 17px; }
      .ai-benefit p { font-size: 18px; }
      .ai-benefit-icon { width: 72px; height: 72px; flex-basis: 72px; }
      .ai-benefit:nth-of-type(2), .ai-benefit:nth-of-type(4) { margin-left: 66px; }
      .ai-benefit:nth-of-type(3) { margin-left: 92px; }
      .ai-connector { width: 178px; }
      .iot-list-column { width: 38%; }
      .iot-diagram-column { width: 62%; padding-left: 32px; }
      .growth-layout { grid-template-columns: 18% 39% minmax(0, 1fr); gap: 18px; }
      .growth-right { padding-left: 0; }
      .growth-right h2 { font-size: 31px; line-height: 45px; }
      .growth-small-stats { gap: 16px; margin-top: 31px; }
      .growth-stat, .growth-small-stats .growth-stat { padding-right: 14px; padding-left: 14px; }
      .growth-number { font-size: 34px; }
      .growth-cooperation { gap: 8px; }
      .growth-cooperation p { font-size: 11px; }
      .certification-block { padding: 20px; }
      .certification-block p { width: 150px; }
      .growth-clients > .icon { left: 50%; transform: translateX(-50%); }
      .news-card { min-height: 452px; }
      .audit-panel { width: 67%; padding-left: 22%; padding-right: 28px; }
      .audit-photo { left: -10px; width: 31%; height: 240px; top: 135px; }
      .audit-text h2 { font-size: 31px; line-height: 46px; }
      .audit-offerings { width: 30%; }
      .audit-offerings li { gap: 18px; font-size: 18px; }
      .company-intro { padding-right: 30px; }
      .company-principle { padding-right: 22px; padding-left: 30px; }
      .company-action { padding-right: 0; }
      .footer-grid { grid-template-columns: 21% 21% 18% 15% 25%; gap: 0; }
      .footer-column { padding-right: 15px; }
      .footer-contact { padding-right: 0; }
      .footer-logo { width: 160px; height: 64px; }
    }

    @media (max-width: 991px) {
      .site-header .navbar-collapse { position: fixed; top: 0; right: 0; width: min(380px, 88vw); height: 100vh; height: 100dvh; margin: 0; padding: 110px 30px 30px; border: 0; background: var(--color-white); transform: translateX(100%); visibility: hidden; opacity: 0; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.45s ease; z-index: 1050; overflow: hidden; }
      .site-header .navbar-collapse.show { transform: translateX(0); visibility: visible; opacity: 1; }
      .site-header .navbar-nav { width: 100%; max-height: calc(100vh - 215px); max-height: calc(100dvh - 170px); align-items: stretch; gap: 0; margin: 0; overflow-y: auto; overflow-x: hidden; padding-right: 8px; -webkit-overflow-scrolling: touch; }
      .site-header .nav-link { padding: 15px 4px; font-size: 16px; }
      .site-header .nav-link.active::after { right: auto; width: 44px; }
      .site-header .navbar-toggler { position: relative; z-index: 1060; }
      .site-header .navbar-collapse .appointment-btn { width: 100%; margin-top: 20px; }
      .site-header .navbar-collapse::before { content: ""; position: absolute; inset: 0; background: var(--color-black); z-index: -1; }
      .appointment-btn { margin: 20px 0 0; }
      .hero-section { padding: 30px 0 54px; }
      .hero-layout { grid-template-columns: 1fr; gap: 40px; }
      .hero-content { max-width: 100%; }
      .hero-title { font-size: 48px; line-height: 1.4; }
      .hero-copy { max-width: 620px; font-size: 17px; line-height: 29px; }
      .hero-divider { width: 75%; margin: 28px 0 34px; }
      .hero-media-column { padding-top: 0; }
      .hero-decoration-placeholder { display: none; }
      .solutions-section { padding: 54px 0 60px; }
      .solutions-intro { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
      .solutions-description { padding: 0; }
      .solutions-description .section-copy { max-width: 630px; font-size: 20px; }
      .solutions-controls { margin-top: 15px; }
      .solutions-slider { margin-top: 18px; }
      .solutions-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .brands-section { padding: 42px 0; }
      .brands-heading h2 { max-width: 80%; }
      .brands-slider { margin-top: 24px; }
      .brands-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .case-heading { padding-top: 30px; padding-bottom: 30px; }
      .case-heading h2 { max-width: 490px; font-size: 30px; line-height: 1.45; }
      .case-heading .btn { min-height: 47px; font-size: 12px; }
      .case-study h3 { font-size: 18px; }
      .cases-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .testimonials-section { padding: 48px 0; }
      .testimonials-section h2 { margin-bottom: 30px; }
      .testimonial-card { height: auto; min-height: 260px; padding-right: 25px; padding-left: 25px; }
      .testimonial-controls { width: 100%; margin-top: 30px; }
      .testimonials-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .services-section { padding: 60px 0; }
      .services-copy-column, .services-grid-column { width: 100%; }
      .services-copy-column { max-width: 640px; padding: 0; }
      .services-copy-column .section-copy { margin-top: 19px; }
      .services-copy-column .btn { margin-top: 24px; }
      .services-grid-column { margin-top: 36px; }
      .service-grid { width: 100%; }
      .service-tile { min-height: 175px; padding: 20px; }
      .service-tile p { max-width: 250px; }
      .consultation-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px 30px; }
      .consultation-media { grid-row: span 2; padding-right: 26px; }
      .consultation-copy h2 { font-size: 30px; line-height: 42px; }
      .consultation-copy h2 .consultation-title-line { white-space: normal; }
      .consultation-copy p { font-size: 13px; }
      .consultation-cta { grid-column: 2; justify-self: start; margin-top: -2px; font-size: 13px; }
      .ai-value-section { padding: 44px 0; }
      .ai-layout { display: grid; height: auto; margin-top: 30px; }
      .ai-art { position: static; width: 70%; max-width: 460px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
      .ai-benefits { position: relative; inset: auto; width: 555px; max-width: 100%; margin: 24px auto 0; }
      .ai-benefit { gap: 30px; }
      .ai-benefit-icon { width: 80px; height: 80px; flex-basis: 80px; }
      .ai-benefit h3 { font-size: 18px; }
      .ai-benefit p { font-size: 18px; }
      .ai-benefit:nth-of-type(2), .ai-benefit:nth-of-type(4) { margin-left: 84px; }
      .ai-benefit:nth-of-type(3) { margin-left: 114px; }
      .ai-connector { width: 200px; }
      .iot-section { padding: 48px 0; }
      .iot-layout { margin-top: 32px; }
      .iot-list-column { width: 100%; padding: 0; border: 0; }
      .iot-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
      .iot-diagram-column { width: 100%; margin-top: 32px; padding: 0; }
      .iot-diagram { height: auto; aspect-ratio: 2 / 1; }
      .growth-section { padding: 48px 0; }
      .growth-layout { grid-template-columns: 1fr 2fr; gap: 24px; }
      .growth-right { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; grid-column: 1 / -1; align-items: center; }
      .growth-right h2 { margin: 0; font-size: 31px; line-height: 1.45; }
      .growth-small-stats { margin-top: 0; }
      .growth-stat { padding-left: 22px; }
      .growth-cooperation { gap: 15px; }
      .growth-cooperation p { font-size: 12px; }
      .news-section { padding-top: 55px; }
      .news-section h2 { margin-bottom: 32px; }
      .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .news-card { min-height: 445px; }
      .news-card-featured { grid-column: auto; }
      .news-card:last-child { grid-column: 1 / -1; min-height: 350px; }
      .news-card:last-child .news-content { max-width: 620px; }
      .audit-section { margin-top: 60px; }
      .audit-layout { min-height: 0; }
      .audit-panel { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 30px; width: 100%; min-height: 0; padding: 38px 32px; max-width: 100%; overflow: hidden !important;}
      .audit-photo { position: static; width: 100%; height: 245px; align-self: center; border-width: 6px; }
      .audit-text h2 { font-size: 30px; line-height: 1.5; }
      .audit-offerings { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 34px 32px 60px; }
      .company-section { padding: 60px 0; }
      .company-layout { grid-template-columns: 1fr 1fr; gap: 32px 0; margin-top: 40px; }
      .company-intro { grid-column: 1 / -1; max-width: 700px; padding: 0; }
      .company-principle { padding-top: 0; padding-left: 28px; }
      .company-focus { padding-left: 0; border-left: 0; }
      .footer-main { padding: 40px 0; }
      .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
      .footer-contact { grid-column: span 2; }
      .contact-phone { margin-top: 0; }
    }

    @media (max-width: 575px) {
      .container { padding-right: 20px; padding-left: 20px; }
      h2 { font-size: 29px; line-height: 1.45; letter-spacing: -0.4px; }
      .site-header .navbar { min-height: 88px; padding: 14px 0; }
      .site-header .navbar-brand, .brand-placeholder { width: 146px; }
      .brand-placeholder { height: 57px; }
      .hero-section { padding: 25px 0 42px; }
      .hero-title { font-size: clamp(27px, 7.65vw, 41px); line-height: 1.5; letter-spacing: -0.55px; }
      .hero-copy { margin-top: 22px; font-size: 15px; line-height: 26px; }
      .hero-divider { margin: 26px 0 29px; }
      .hero-actions { gap: 12px; flex-wrap: wrap; }
      .hero-actions .btn { min-height: 48px; padding: 11px 14px; font-size: 12px; }
      .hero-actions .btn-brand { min-width: 158px; }
      .hero-discover { min-width: 136px; }
      .hero-layout { gap: 34px; }
      .video-controls { left: 9px; bottom: 9px; gap: 8px; }
      .media-control { width: 34px; height: 34px; }
      .media-control .icon { width: 23px; height: 23px; }
      .solutions-section { padding: 42px 0 46px; }
      .solutions-description .section-copy { font-size: 18px; line-height: 22px; }
      .solutions-controls { margin-top: 16px; }
      .slider-arrow { width: 37px; height: 37px; }
      .solution-card { height: 320px; padding: 23px 19px; }
      .solution-card p { max-width: 340px; font-size: 18px; line-height: 22px; }
      .solutions-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: 1fr; }
      .brands-section { padding: 35px 0 26px; }
      .brands-heading h2 { width: 290px; max-width: 88%; min-height: 40px; padding: 7px 15px; font-size: 16px; line-height: 24px; }
      .brands-slider { padding-right: 20px; padding-left: 20px; }
      .brands-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .case-heading { align-items: flex-start; flex-direction: column; gap: 20px; padding-top: 30px; padding-bottom: 26px; }
      .case-heading h2 { font-size: 29px; line-height: 1.45; }
      .case-heading .btn { min-height: 45px; font-size: 13px; }
      .cases-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: 1fr; }
      .case-study h3 { font-size: 17px; }
      .testimonials-section { padding: 40px 0 34px; }
      .testimonials-section h2 { margin-bottom: 28px; }
      .testimonial-card { min-height: 276px; padding: 26px; }
      .testimonial-card blockquote { font-size: 13px; line-height: 23px; }
      .testimonial-person h3 { font-size: 18px; }
      .testimonial-person p { font-size: 11px; }
      .testimonials-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: 1fr; }
      .services-section { padding: 45px 0; }
      .services-copy-column h2 { font-size: 29px; line-height: 1.5; }
      .section-copy { font-size: 18px; line-height: 23px; }
      .services-grid-column { margin-top: 30px; }
      .service-grid { gap: 14px; }
      .service-tile { min-height: 190px; padding: 16px 10px; border-radius: 12px; }
      .service-tile .icon { width: 30px; height: 30px; }
      .service-tile h3 { font-size: 15px; line-height: 21px; }
      .service-tile p { font-size: 11px; line-height: 17px; }
      .consultation-section { padding: 34px 0; }
      .consultation-layout { grid-template-columns: 1fr; gap: 26px; text-align: center; }
      .consultation-media { grid-row: auto; justify-self: center; width: 240px; height: 162px; padding: 0 25px 0 0; }
      .consultation-media img { width: 215px; height: 162px; }
      .consultation-media::after { box-shadow: 0 162px 0 var(--color-primary); }
      .consultation-copy h2 { font-size: 28px; line-height: 1.45; }
      .consultation-copy p { margin-top: 12px; font-size: 13px; line-height: 22px; }
      .consultation-cta { grid-column: 1; justify-self: center; margin: 0; font-size: 13px; }
      .ai-value-section { padding: 38px 0; border-radius: 18px 18px 0 0; }
      .ai-art { width: 90%; max-width: 350px; }
      .ai-benefits { width: 100%; margin-top: 24px; }
      .ai-connector { display: none; }
      .ai-benefits::before { position: absolute; top: 38px; bottom: 40px; left: 28px; width: 2px; background: var(--color-white); content: ""; }
      .ai-benefit, .ai-benefit:nth-of-type(n) { min-height: 95px; height: auto; margin-left: 0; gap: 18px; }
      .ai-benefit-icon { width: 58px; height: 58px; flex-basis: 58px; }
      .ai-benefit-icon .icon { width: 32px; height: 32px; }
      .ai-benefit h3 { font-size: 16px; line-height: 25px; }
      .ai-benefit p { font-size: 12px; line-height: 20px; }
      .iot-section { padding: 40px 0; }
      .iot-features { grid-template-columns: 1fr; gap: 20px; }
      .iot-features h3 { font-size: 15px; }
      .iot-features p { font-size: 13px; }
      .iot-diagram { aspect-ratio: 1.9 / 1; }
      .growth-section { padding: 38px 0; }
      .growth-layout { grid-template-columns: 1fr; gap: 20px; }
      .growth-first { grid-template-columns: 1fr 1fr; grid-template-rows: 148px; gap: 16px; }
      .growth-stat { padding: 17px; }
      .growth-number { font-size: 34px; line-height: 45px; }
      .growth-cooperation { flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
      .growth-cooperation p { max-width: 130px; }
      .growth-credentials { height: 280px; }
      .certification-block, .countries-block { height: 140px; padding: 20px; }
      .certification-block > .icon { width: 65px; height: 70px; }
      .certification-block p { width: 150px; font-size: 18px; }
      .countries-block p { font-size: 16px; }
      .globe-placeholder { width: 98px; height: 98px; }
      .growth-right { grid-template-columns: 1fr; gap: 20px; }
      .growth-right h2 { max-width: 360px; margin-top: 7px; font-size: 30px; }
      .growth-small-stats { max-width: none; gap: 16px; }
      .growth-small-stats .growth-stat { padding-left: 20px; }
      .news-section { padding-top: 44px; }
      .news-section h2 { margin-bottom: 28px; }
      .news-grid { grid-template-columns: 1fr; gap: 20px; }
      .news-card, .news-card:last-child { grid-column: auto; min-height: 440px; }
      .news-content { padding: 18px; }
      .news-content h3 { font-size: 18px; line-height: 24px; }
      .news-content p { font-size: 12px; line-height: 21px; }
      .audit-section { margin-top: 48px; }
      .audit-panel { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
      .audit-photo { height: auto; aspect-ratio: 1.4 / 1; }
      .audit-text h2 { font-size: 28px; }
      .audit-text p { font-size: 13px; line-height: 1.6; }
      .audit-offerings { gap: 22px 16px; padding: 30px 15px 60px; }
      .audit-offerings li { gap: 10px; font-size: 12px; line-height: 19px; }
      .audit-offerings .icon { width: 25px; height: 25px; }
      .company-section { padding: 44px 0; }
      .company-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
      .company-intro { font-size: 18px; line-height: 25px; }
      .company-principle { padding: 25px 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
      .company-principle h3 { gap: 14px; margin-bottom: 16px; font-size: 25px; }
      .company-principle h3 .icon { width: 34px; height: 34px; }
      .company-principle ul { font-size: 18px; line-height: 26px; }
      .footer-main { padding: 34px 0; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-social { margin-top: 24px; }
      .footer-column { padding: 0; }
      .footer-links { font-size: 13px; }
      .footer-contact { grid-column: 1 / -1; }
      .contact-list { gap: 18px; }
      .contact-list li { font-size: 13px; line-height: 20px; }
      .copyright { padding: 12px 24px; font-size: 9px; line-height: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }


/*----------hiome page lot sec side html-----------------*/

.diagram-scroll {width: 100%; overflow-x: auto; }
.diagram {--u: 0.03698224852cqw; position: relative; container-type: inline-size; isolation: isolate; width: 100%; max-width: 100%; min-width: 100%; aspect-ratio: 2704 / 1521; margin: 0 auto; overflow: hidden; background: #fff; }
.svg-definitions {position: absolute; width: 0; height: 0; overflow: hidden; }
.layer {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.connections { z-index: 1; }
.cloud-art { z-index: 2; }
.output-routes { z-index: 4; }
.ot-panel {position: absolute; z-index: 3; left: calc(40 * var(--u)); top: calc(288 * var(--u)); width: calc(396 * var(--u)); height: calc(807 * var(--u)); padding: calc(52 * var(--u)) calc(39 * var(--u)); border: calc(2 * var(--u)) solid #beeaff; border-radius: calc(44 * var(--u)); background: linear-gradient(120deg, #f8fdff, #f0faff); }
.ot-panel h2 {margin: 0; font-size: calc(44 * var(--u)); line-height: 1.14; letter-spacing: calc(-1.2 * var(--u)); }
.ot-accent {width: calc(75 * var(--u)); height: calc(5 * var(--u)); margin-top: calc(30 * var(--u)); border-radius: 999px; background: #16b9f3; }
.ot-panel ul {display: grid; gap: calc(21 * var(--u)); margin: calc(35 * var(--u)) 0 0; padding: 0; list-style: none; }
.ot-panel li {display: flex; align-items: center; gap: calc(16 * var(--u)); white-space: nowrap; font-size: calc(29 * var(--u)); line-height: 1.32; }
.check {position: relative; flex: 0 0 calc(23 * var(--u)); width: calc(23 * var(--u)); height: calc(23 * var(--u)); border-radius: 50%; background: #d9f6ff; }
.check::after {content: ""; position: absolute; left: calc(5 * var(--u)); top: calc(5 * var(--u)); width: calc(12 * var(--u)); height: calc(7 * var(--u)); border-left: calc(3 * var(--u)) solid #079ee9; border-bottom: calc(3 * var(--u)) solid #079ee9; transform: rotate(-45deg); }
.sensor {position: absolute; z-index: 6; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--size) * var(--u)); height: calc(var(--size) * var(--u)); animation: appear 0.8s ease both; animation-delay: var(--delay, 0s); }
.medallion {display: grid; place-items: center; width: 100%; height: 100%; border: calc(5 * var(--u)) solid #fff; border-radius: 50%; background: radial-gradient(circle at 37% 28%, #e3f9ff 0%, #b7edff 55%, #d7f6ff 100%); box-shadow: 0 0 0 calc(2 * var(--u)) #bce7ff, 0 calc(6 * var(--u)) calc(10 * var(--u)) #dcefff, inset 0 calc(2 * var(--u)) calc(8 * var(--u)) #ffffff9c; transition: transform 250ms ease, box-shadow 250ms ease; }
.sensor:hover .medallion {transform: translateY(calc(-7 * var(--u))) scale(1.035); box-shadow: 0 0 0 calc(2 * var(--u)) #8bdcff, 0 calc(12 * var(--u)) calc(18 * var(--u)) #b9e7ff; }
.sensor-icon {width: 68%; height: 68%; filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) #52bcf366); }
.sensor--pressure .sensor-icon { width: 78%; height: 78%; }
.sensor--fan .sensor-icon { width: 72%; height: 72%; }
.sensor--fan .sensor-icon {transform-origin: 50% 50%; animation: rotate 13s linear infinite; }
.sensor-label {position: absolute; left: 50%; top: calc(100% + 9 * var(--u)); transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: calc(31 * var(--u)); font-weight: 600; line-height: 1.28; }
.gateway-image {position: absolute; z-index: 6; left: calc(782 * var(--u)); top: calc(535 * var(--u)); width: calc(350 * var(--u)); height: calc(240 * var(--u)); overflow: visible; }
.wifi-wave {animation: wifi-pulse 2.4s ease-in-out infinite; }
.wifi-wave:nth-of-type(2) { animation-delay: 0.3s; }
.wifi-wave:nth-of-type(3) { animation-delay: 0.6s; }
.gateway-copy {position: absolute; z-index: 6; left: calc(720 * var(--u)); top: calc(800 * var(--u)); width: calc(474 * var(--u)); text-align: center; }
.gateway-copy h2 {margin: 0; white-space: nowrap; font-size: calc(39 * var(--u)); line-height: 1.2; }
.gateway-copy p {margin: calc(7 * var(--u)) 0 0; white-space: nowrap; font-size: calc(31 * var(--u)); }
.auth-copy {position: absolute; z-index: 5; left: calc(1310 * var(--u)); top: calc(582 * var(--u)); width: calc(225 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); line-height: 1.18; }
.auth-copy span {display: block; }
.lock-badge {position: absolute; z-index: 6; left: calc(1373 * var(--u)); top: calc(680 * var(--u)); display: grid; place-items: center; width: calc(91 * var(--u)); height: calc(91 * var(--u)); border: calc(5 * var(--u)) solid #fff; border-radius: 50%; background: linear-gradient(140deg, #32cefa, #0755db); box-shadow: 0 0 0 calc(2 * var(--u)) #c4edff; }
.lock-badge svg {width: 56%; height: 56%; }
.cloud-content {position: absolute; z-index: 4; left: calc(1777 * var(--u)); top: calc(195 * var(--u)); width: calc(410 * var(--u)); text-align: center; }
.database-icon {display: block; width: calc(116 * var(--u)); height: calc(128 * var(--u)); margin: 0 auto; animation: float 4s ease-in-out infinite; }
.cloud-content h2 {margin: calc(13 * var(--u)) 0 0; white-space: nowrap; font-size: calc(47 * var(--u)); line-height: 1.16; }
.cloud-content p {margin: calc(8 * var(--u)) 0 0; white-space: nowrap; font-size: calc(35 * var(--u)); }
.database-card {position: absolute; z-index: 6; left: calc(1874 * var(--u)); top: calc(494 * var(--u)); width: calc(472 * var(--u)); height: calc(228 * var(--u)); padding: calc(24 * var(--u)) calc(40 * var(--u)); border: calc(2 * var(--u)) solid #bceaff; border-radius: calc(34 * var(--u)); background: linear-gradient(125deg, #fff 5%, #e5f8ff 100%); box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) #69c8ee2b; font-size: calc(31 * var(--u)); line-height: 1.43; }
.database-card .bullet {color: #087be8; }
.gear-badge {position: absolute; z-index: 6; left: calc(2416 * var(--u)); top: calc(569 * var(--u)); display: grid; place-items: center; width: calc(215 * var(--u)); height: calc(215 * var(--u)); border: calc(4 * var(--u)) solid #d4f3ff; border-radius: 50%; background: radial-gradient(circle at 42% 35%, #faffff, #eaf9ff); }
.gear-badge svg {width: 87%; height: 87%; animation: rotate 22s linear infinite; }
.gear-label {position: absolute; z-index: 6; left: calc(2391 * var(--u)); top: calc(787 * var(--u)); width: calc(264 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.34; }
.outcomes {position: absolute; z-index: 3; left: calc(1547 * var(--u)); top: calc(888 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); width: calc(950 * var(--u)); height: calc(529 * var(--u)); border: calc(2 * var(--u)) solid #d1f1ff; border-radius: calc(36 * var(--u)); background: linear-gradient(120deg, #faffff, #f4fcff); }
 .outcome {position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.outcome + .outcome::before {content: ""; position: absolute; left: 0; top: calc(23 * var(--u)); bottom: calc(48 * var(--u)); width: calc(2 * var(--u)); background: #e0f3fc; }
.feature-tile {display: grid; place-items: center; width: calc(224 * var(--u)); height: calc(170 * var(--u)); margin-top: calc(20 * var(--u)); border-radius: calc(48 * var(--u)); background: linear-gradient(135deg, #e9faff, #d8f3ff 72%, #eefbff); box-shadow: inset 0 0 0 calc(1 * var(--u)) #c8edff; transition: transform 250ms ease, box-shadow 250ms ease; }
.outcome:hover .feature-tile {transform: translateY(calc(-8 * var(--u))); box-shadow: 0 calc(12 * var(--u)) calc(20 * var(--u)) #a9e1ff80; }
.feature-tile svg {width: calc(170 * var(--u)); height: calc(145 * var(--u)); }
.feature-tile--phone svg { width: calc(120 * var(--u)); }
.feature-tile--report svg { width: calc(135 * var(--u)); }
.outcome h3 {height: calc(84 * var(--u)); margin: calc(14 * var(--u)) 0 0; font-size: calc(31 * var(--u)); font-weight: 600; line-height: 1.27; }
.audience {display: flex; justify-content: center; align-items: flex-start; height: calc(82 * var(--u)); margin-top: calc(16 * var(--u)); }
.audience--two svg + svg {margin-left: calc(-12 * var(--u)); }
.role {margin: calc(12 * var(--u)) 0 0; font-size: calc(31 * var(--u)); line-height: 1.28; }
.wire {fill: none; stroke: #168ff0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wire--cyan { stroke: #2ac6ed; }
.node-dot {fill: #139ef1; animation: node-glow 2.7s ease-in-out infinite; }
.node-dot:nth-child(3n) { animation-delay: 0.8s; }
.data-pipe {fill: none; stroke: url(#pipe-gradient); stroke-width: 31; stroke-linecap: round; stroke-linejoin: round; }
.data-flow {fill: none; stroke: #efffff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 15 26; animation: stream 2.4s linear infinite; }
.branch-line {fill: none; stroke: #25bff2; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18 19; animation: stream 3.5s linear infinite; }
.cloud-lower {fill: none; stroke: url(#lower-cloud-gradient); stroke-width: 43; stroke-linecap: round; stroke-linejoin: round; }
.cloud-shell {fill: url(#cloud-fill); stroke: url(#cloud-rim); stroke-width: 37; stroke-linejoin: round; filter: url(#cloud-shadow); animation: cloud-breathe 6s ease-in-out infinite; }
    @keyframes appear {
      from { opacity: 0; filter: blur(5px); }
      to { opacity: 1; filter: blur(0); }
    }

    @keyframes rotate {
      to { transform: rotate(360deg); }
    }

    @keyframes stream {
      to { stroke-dashoffset: -82; }
    }

    @keyframes float {
      50% { transform: translateY(calc(-5 * var(--u))); }
    }

    @keyframes wifi-pulse {
      50% { opacity: 0.35; }
    }

    @keyframes node-glow {
      50% { opacity: 0.55; }
    }

    @keyframes cloud-breathe {
      50% { opacity: 0.94; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
/* =========================
   SVG LINE ANIMATION
   ========================= */

.ai-benefits svg path,
.diagram .wire,
.diagram .data-pipe,
.diagram .branch-line,
.diagram .cloud-lower {stroke-dasharray: 12 10; animation: svgLineFlow 3s linear infinite; }
@keyframes svgLineFlow {
    to {
        stroke-dashoffset: -44;
    }
}


/* =========================
   DATA FLOW LINE
   ========================= */

.diagram .data-flow {stroke-dasharray: 18 12; animation: dataFlow 2s linear infinite; }

@keyframes dataFlow {
    to {
        stroke-dashoffset: -60;
    }
}


/* =========================
   NODE DOTS
   ========================= */

.diagram .node-dot {animation: nodePulse 2s ease-in-out infinite; }

@keyframes nodePulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
        transform-box: fill-box;
        transform-origin: center;
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}


/* =========================
   SENSOR ICONS
   ========================= */

.diagram .sensor-icon {
    animation: iconPulse 3s ease-in-out infinite;
}

.diagram .sensor:nth-of-type(2) .sensor-icon {
    animation-delay: 0.2s;
}

.diagram .sensor:nth-of-type(3) .sensor-icon {
    animation-delay: 0.4s;
}

.diagram .sensor:nth-of-type(4) .sensor-icon {
    animation-delay: 0.6s;
}

.diagram .sensor:nth-of-type(5) .sensor-icon {
    animation-delay: 0.8s;
}

@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
        transform-box: fill-box;
        transform-origin: center;
    }

    50% {
        transform: scale(1.08);
    }
}


/* =========================
   WIFI WAVES
   ========================= */

.diagram .wifi-wave {animation: wifiPulse 2s ease-in-out infinite; }

.diagram .wifi-wave:nth-of-type(2) {animation-delay: 0.25s; }

.diagram .wifi-wave:nth-of-type(3) {animation-delay: 0.5s; }

@keyframes wifiPulse {
    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================
   CLOUD
   ========================= */

.diagram .cloud-shell {animation: cloudGlow 4s ease-in-out infinite; }

@keyframes cloudGlow {
    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}


/* =========================
   DATABASE ICON
   ========================= */

.diagram .database-icon {animation: databaseFloat 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

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

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


/* =========================
   GEAR ICON
   ========================= */

.diagram .gear-badge svg {animation: gearRotate 8s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gearRotate {
    to {
        transform: rotate(360deg);
    }
}


/* =========================
   OUTPUT ICONS
   ========================= */

.diagram .feature-tile svg {animation: featureFloat 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
 .diagram .audience svg {animation: personFloat 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

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

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

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

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