:root{
        --marquee-width: 100%;
        --marquee-height: 120px;
        --marquee-elements-displayed: 6;
        --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
        --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
      }
      body {
        font-family: "Poppins", sans-serif;
        scroll-behavior: smooth;
      }

      h1,
      h2,
      h3 {
        font-family: "Poppins", sans-serif;
      }
      span,
      p {
        font-family: "Poppins", sans-serif;
      }
      .hero-bg {
        background: linear-gradient(
        rgba(0, 0, 0, 0.3),
        rgba(255, 255, 255, 0.1)
      ),
      url("./assets/images/hero_image.jpg");
        background-size: cover;
        background-position: center;
      }
      .btn-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .btn-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(28, 160, 105, 0.3);
      }
      .app-preview {
        transition: transform 0.3s ease;
      }
      .app-preview:hover {
        transform: scale(1.05) rotate(2deg);
      }
      .hero-overlay {
        background: linear-gradient(
          135deg,
          rgba(28, 160, 105, 0.1) 0%,
          rgba(255, 255, 255, 0.9) 100%
        );
      }
      .middle-phone-hero {
        position: relative;
        z-index: 10;
        transform-origin: center center;
      }
      .middle-phone-transition {
        filter: drop-shadow(0 0 20px rgba(28, 160, 105, 0.3));
        transition: filter 0.3s ease;
      }
      .second-section {
        position: relative;
        background-color: white;
        z-index: 1;
      }
      .w-112 {
        width: 28rem;
      }
      .h-112 {
        height: 28rem;
      }
      .w-128 {
        width: 32rem;
      }
      .h-128 {
        height: 32rem;
      }
      .circular-backdrop {
        animation: backdrop-pulse 4s ease-in-out infinite alternate;
        position: relative;
        z-index: 2;
      }
      .circle-glass {
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        z-index: 3;
        background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.14) 0%,
        transparent 85%
        );
        pointer-events: none;
        mix-blend-mode: lighten;
        opacity: 0.8;
      }
      .sound-ring-1,
      .sound-ring-2,
      .sound-ring-3,
      .sound-ring-4 {
        z-index: 4;
      }
      .sound-ring-1 {
        animation: sound-wave 3s ease-in-out infinite;
        animation-delay: 0s;
      }
      .sound-ring-2 {
        animation: sound-wave 3s ease-in-out infinite;
        animation-delay: 0.5s;
      }
      .sound-ring-3 {
        animation: sound-wave 3s ease-in-out infinite;
        animation-delay: 1s;
      }
      .sound-ring-4 {
        animation: sound-wave 3s ease-in-out infinite;
        animation-delay: 1.5s;
        background: linear-gradient(
          120deg,
          rgba(28, 160, 105, 0.12),
          rgba(28, 160, 105, 0.04)
        );
        -webkit-mask-image: linear-gradient(
          110deg,
          transparent 0%,
          #fff 10%,
          #fff 90%,
          transparent 100%
        );
        mask-image: linear-gradient(
          110deg,
          transparent 0%,
          #fff 10%,
          #fff 90%,
          transparent 100%
        );
      }
      .floating-particles {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index: 5;
      }
      .floating-particles span {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        opacity: 0.3;
        background: linear-gradient(135deg, #1ca069 50%, #22c55e 100%);
        filter: blur(1px);
        animation: particle-float 10s infinite alternate
        cubic-bezier(0.62, 1.25, 0.57, 1);
      }
      @keyframes backdrop-pulse {
        0% {
          transform: scale(1);
          opacity: 0.2;
        }
        50% {
          transform: scale(1.1);
          opacity: 0.32;
        }
        100% {
          transform: scale(1.18);
          opacity: 0.14;
        }
      }
      @keyframes sound-wave {
      0% {
        transform: scale(0.8);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.08);
        opacity: 0.3;
      }
      100% {
        transform: scale(1.32);
        opacity: 0;
      }
      }
      @keyframes particle-float {
      0%   {
        transform: translateY(0) scale(0.7);
      }
      60%   {
        opacity: 0.5;
      }
      100% {
        transform: translateY(-160px) scale(1.2);
      }
      }
      .phone-shadow {
        width: 12vw;
        height: 2vw;
        background: radial-gradient(
        ellipse at center,
        rgba(28, 160, 105, 0.14) 0%,
        rgba(28, 120, 105, 0.05) 98%
        );
        border-radius: 50%;
        filter: blur(6px);
        opacity: 1;
        z-index: 8;
      }
      .cta-glow {
        box-shadow: 0 0 0 0 #1ca06940;
        animation: glow-bounce 2s infinite alternate;
      }
      @keyframes glow-bounce {
      0% {
        box-shadow: 0 0 0 0 #1ca06940;
      }
      100% {
        box-shadow: 0 0 24px 8px #1ca06960;
      }
      }

      .card-3d {
        will-change: transform, box-shadow;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.5s cubic-bezier(0.4, 0.2, 0.9, 1);
      }
      .card-inner {
        background: linear-gradient(135deg, #f6fff8 10%, #e8fce3 100%);
        box-shadow: 0 8px 44px -12px rgba(28, 160, 105, 0.18),
        0 0.5px 5px rgba(60, 140, 110, 0.09);
        border-radius: 1.5rem;
        outline: 1.5px solid #e6f7ee;
        transition: box-shadow 0.5s, background 0.6s;
        position: relative;
        min-width: 230px;
        max-width: 570px;
      }
      .shadow-3d {
        box-shadow: 0 8px 44px -12px rgba(28, 160, 105, 0.14),
        0 1.5px 21px rgba(28, 160, 105, 0.09);
      }
      .shadow-3d-hover {
        box-shadow: 0 16px 72px -10px rgba(28, 160, 105, 0.25),
        0 6px 18px rgba(28, 160, 105, 0.12),
        0 1.5px 21px rgba(28, 160, 105, 0.11);
      }
      .card-3d:hover,
      .card-3d:focus-within {
        transform: rotateY(-6deg) scale(1.04) translateY(-8px);
      }
      .card-3d:active {
        transform: scale(0.99) rotateY(1deg) translateY(2px);
      }
      .card-inner::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 30px;
        width: 120px;
        height: 18px;
        pointer-events: none;
        background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.01) 100%
        );
        border-radius: 80px;
        filter: blur(4px);
        opacity: 0.6;
        transition: opacity 0.5s;
      }
      .card-3d:hover .card-inner::before {
        opacity: 0.77;
      }

      .highlight-title {
      background: linear-gradient(135deg, #1ca069 0%, #22c55e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .highlight-panel {
        min-width: 270px;
      }
      @media (max-width: 1024px) {
      .second-section {
        flex-direction: column;
        justify-content: flex-start;
        padding: 2.5rem 0 1rem 0;
      }
      .highlight-panel {
        width: 94%;
        padding-left: 0;
        text-align: center;
        margin: 0 auto;
      }
      .card-inner {
        margin-left: auto;
        margin-right: auto;
      }
      }
      @media (max-width: 700px) {
      .highlight-title {
        font-size: 2rem;
      }
      .card-inner {
        padding-left: 1.3rem;
        padding-right: 1.3rem;
      }
      .highlight-panel {
        padding: 0;
      }
      }
      @media (max-width: 520px) {
      .highlight-title {
        font-size: 1.4rem;
      }
      .card-3d {
        margin-bottom: 1.4rem;
      }
      .card-inner {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
      }
      }
      @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");

      .marquee-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .marquee {
        width: var(--marquee-width);
        height: var(--marquee-height);
        background-color: #fff;
        overflow: hidden;
        position: relative;
      }

      .marquee::before,
      .marquee::after {
        position: absolute;
        top: 0;
        width: 10rem;
        height: 100%;
        content: "";
        z-index: 2;
        pointer-events: none;
      }

      .marquee::before {
        left: 0;
        background: linear-gradient(to right, #fff 0%, transparent 100%);
      }

      .marquee::after {
        right: 0;
        background: linear-gradient(to left, #fff 0%, transparent 100%);
      }

      .marquee-content {
        list-style: none;
        height: 100%;
        display: flex;
        align-items: center;
        animation: scrolling var(--marquee-animation-duration) linear infinite;
        padding: 0;
        margin: 0;
      }

      .marquee.reverse .marquee-content {
        animation: scrolling-reverse var(--marquee-animation-duration) linear infinite;
      }

      @keyframes scrolling {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
      }
      }

      @keyframes scrolling-reverse {
      0% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
      }
      100% {
        transform: translateX(0);
      }
      }

      .marquee-content li {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        width: var(--marquee-element-width);
        height: 100%;
        padding: 0.5rem;
      }

      .marquee-content li img {
        max-height: 60%;
        max-width: 100%;
        object-fit: contain;
        background: white;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      @media (max-width: 768px) {
        :root {
          --marquee-elements-displayed: 3;
        }

        .marquee::before,
        .marquee::after {
          width: 5rem;
        }
      }

      .gallery {
        width: 100%;
        height: 650px;
        overflow: hidden;
        background: #fff; /* or soft gradient */
      }
      .cards {
        width: 19rem;
        height: 26rem;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .cards li {
        list-style: none;
        width: 19rem;
        height: 26rem;
        text-align: center;
        position: absolute;
        top: 0; left: 0;
        border-radius: 1rem;
        background: #fff;
      }
      .cards li img {
        max-width: 98%;
        max-height: 160px;
        margin-bottom: 1rem;
        box-shadow: 0 6px 18px rgba(28,160,105,0.13);
      }
      .testimonial-card blockquote {
        font-size: 1.1rem;
        color: #222;
        margin-bottom: 1.2rem;
      }

      .actions button {
        background: #1ca069;
        color: #fff;
        border-radius: 999px;
        padding: 10px 22px;
        font-weight: 600;
        box-shadow: 0 2px 15px rgba(28,160,105,0.08);
        border: none;
        transition: background 0.2s;
      }
      .actions button:hover {
        background: #22c55e;
        color: #fff;
      }
      @media (max-width: 760px) {
      .cards, .cards li { width: 98vw; height: auto; min-height: 360px;}
      }

      .slider-btn {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        will-change: transform;
      }
      .slider-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white; transform: scale(1.12);
        box-shadow: 0 8px 20px rgba(16,185,129,0.2);
      }
      .dot {
        width: 12px; height: 12px;
        border-radius: 50%; background-color: #d1d5db; cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .dot.active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); width: 28px; border-radius: 6px; }
      .testimonial-card { transition: box-shadow 0.4s; will-change: transform; }
      .testimonial-card:hover { box-shadow: 0 14px 28px rgba(16,185,129,0.16); }
      .progress-bar {
        position: absolute; bottom: 0; left: 0;
        height: 2px; background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        width: 0%; transition: width 0.1s linear;
      }