:root{
      --brand-green: #06db4d; /* dark green */
      --accent: #00b85c;
      --muted: #6c757d;
      --bg: #F5F7F5;
      --card: #ffffff;
      --text-green: #0a6623;
    }

    /* Apple system font stack (SF Pro-like) */
    html,body{height:100%;}
    body{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:#122; -webkit-font-smoothing:antialiased;}
    h1,h2,h3{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight:700}

    /* Navbar */
    .navbar{transition:all .25s ease; background:transparent;}
    .navbar.scrolled{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95)); box-shadow:0 6px 20px rgba(10,20,15,0.06);}
    .logo-sound{width:46px;height:46px;border-radius:10px;display:inline-block;margin-right:.6rem}

    /* Hero */
    .hero{padding:6rem 0;}
    .hero-left{max-width:680px}
    .display-large{font-size:clamp(3.0rem, 5.4vw, 4.2rem);line-height:1.02}
    .lead-sm{font-size:1.05rem; color:var(--muted)}

    /* Card styles */
    .card-soft{background:var(--card); border-radius:14px; box-shadow:0 12px 30px rgba(12,25,40,0.06);}

    /* Services */
    .service-icon{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(15,107,63,0.06), rgba(0,0,0,0.02));}

    /* Portfolio grid */
    .portfolio-item{border-radius:12px; overflow:hidden}
    .portfolio-item img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.9,.3,1)}
    .portfolio-item:hover img{transform:scale(1.06)}

    /* Testimonials */
    .testimonial{border-radius:12px;padding:1.6rem;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));box-shadow:0 8px 24px rgba(11,20,30,0.04)}

    /* CTA */
    .cta{padding:2.2rem;border-radius:12px}

    /* Footer */
    footer{background: linear-gradient(45deg, #050505, #298348); color:#cfeee0; padding:3rem 0}

    /* subtle floating animation for hero illustration container */
    @keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
    .floaty{animation:floaty 6s ease-in-out infinite}

    /* wave divider */
    .wave{display:block; width:100%;}

    @media (max-width:767px){.hero{padding:3rem 0}}

/* clients */
.our-clients-imgs img{
    max-height: 60px;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}
.our-clients-imgs img:hover{
    opacity: 1;
}
/* footer */
/* echospread's text green */
.text-echospread-green{
    color: var(--text-green) !important;
}
/* Video */
iframe {
    width: 100%;
    height: 200px;
    border-radius: 12px;
}