/* ==========================================================
   ROOT
   ========================================================== */

:root {
    --teal:#12A89E;
    --teal-dark:#078C85;
    --green:#7CB342;
    --orange:#F5A623;
    --red:#FF4D4D;
    --purple:#8B5CF6;
    --blue:#3B82F6;
    --pink:#EC4899;
    --ink:#101012;
    --copy:#5B5C63;
    --muted:#858990;
    --line:#E5E8EA;
    --soft:#F5F7F8;
    --white:#FFFFFF;
}


/* ==========================================================
   RESET
   ========================================================== */

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    scroll-behavior:smooth;
}

body {
    background:#fff;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}

img {
    max-width:100%;
}

a {
    color:inherit;
    text-decoration:none;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5.5%;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid #ECEEF0;
    backdrop-filter:blur(16px);
}

.logo {
    display:flex;
    align-items:center;
}

.logo img {
    width:112px;
    height:auto;
    display:block;
}

.main-nav {
    display:flex;
    align-items:center;
    gap:28px;
}

.main-nav a {
    position:relative;
    font-family:'Poppins',sans-serif;
    font-size:.78rem;
    font-weight:600;
    color:#17181A;
    transition:color .25s ease;
}

.main-nav a::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-9px;
    width:0;
    height:2px;
    margin:auto;
    border-radius:10px;
    background:var(--teal);
    transition:width .25s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color:var(--teal);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width:100%;
}

.header-contact {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:11px 22px;
    border-radius:999px;
    background:var(--teal);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:.72rem;
    font-weight:600;
    transition:all .25s ease;
}

.header-contact:hover {
    background:var(--teal-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(18,168,158,.2);
}


/* ==========================================================
   HERO
   ========================================================== */

.hero{position:relative;min-height:500px;padding:72px 5.5% 65px;overflow:hidden;background:radial-gradient(circle at 82% 25%,rgba(18,168,158,.09),transparent 28%),radial-gradient(circle at 8% 85%,rgba(124,179,66,.07),transparent 27%),linear-gradient(180deg,#fff 0%,#f7fbfa 100%);}
.hero::before{content:"";position:absolute;top:-180px;right:-130px;width:560px;height:430px;border-radius:50%;background:rgba(18,168,158,.035);transform:rotate(-18deg);}
.hero-inner{position:relative;z-index:2;max-width:1350px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;}
.hero-content{width:100%;max-width:680px;}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:17px;color:var(--teal);font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.eyebrow::before{content:"";width:32px;height:2px;border-radius:20px;background:var(--teal);}
.hero h1{max-width:680px;margin:0;font-family:'Poppins',sans-serif;font-size:clamp(2.5rem,4.7vw,4rem);line-height:1.06;font-weight:800;letter-spacing:-.045em;color:#11151d;}
.hero h1 span{color:var(--teal);}
.hero-description{max-width:620px;margin:24px 0 27px;color:#606974;font-size:.94rem;line-height:1.7;}
.hero-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:17px 32px;border-radius:999px;background:var(--teal);color:#fff;font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:700;box-shadow:0 13px 28px rgba(18,168,158,.2);transition:all .3s ease;}
.hero-button:hover{background:var(--teal-dark);transform:translateY(-3px);box-shadow:0 17px 32px rgba(18,168,158,.25);}


/* ==========================================================
   HERO FEATURES
   ========================================================== */

.hero-features{display:flex;align-items:center;flex-wrap:nowrap;margin-top:38px;width:100%;}
.hero-feature{display:flex;align-items:center;gap:13px;min-height:55px;padding-right:34px;margin-right:34px;border-right:1px solid #dce4e3;}
.hero-feature:last-child{padding-right:0;margin-right:0;border-right:0;}
.hero-feature-icon{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#e8faf8;color:var(--teal);}
.hero-feature-icon svg{width:20px;height:20px;}
.hero-feature strong{display:block;white-space:nowrap;color:#17202a;font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:700;line-height:1.3;}
.hero-feature small{display:block;margin-top:4px;white-space:nowrap;color:#7c838b;font-size:.64rem;line-height:1.3;}


/* ==========================================================
   HERO VISUAL
   Matches the actual HTML:
   .hero-visual
   .hero-image.one
   .hero-image.two
   .hero-image.three
   .hero-image.four
   .hero-note
   .hero-arrow
   ========================================================== */

.hero-visual{position:relative;width:100%;height:430px;max-width:650px;margin:0 auto;overflow:visible;isolation:isolate;}
.hero-visual::before{content:"";position:absolute;width:520px;height:520px;top:-45px;right:-45px;border-radius:50%;background:radial-gradient(circle,rgba(18,168,158,.13) 0%,rgba(18,168,158,.07) 38%,rgba(18,168,158,0) 72%);z-index:-3;}
.hero-visual::after{content:"";position:absolute;width:470px;height:240px;right:0;bottom:-30px;border-radius:50%;background:rgba(18,168,158,.045);filter:blur(35px);z-index:-3;}


/* ==========================================================
   CIRCLE BEHIND COLLAGE
   ========================================================== */

.hero-visual .visual-circle{position:absolute;width:350px;height:350px;top:25px;right:105px;border:1px solid rgba(18,168,158,.15);border-radius:50%;z-index:-1;}
.hero-visual .visual-circle::before{content:"";position:absolute;inset:30px;border:1px dashed rgba(18,168,158,.10);border-radius:50%;}


/* ==========================================================
   IMAGE CARDS
   ========================================================== */

.hero-image{position:absolute;overflow:hidden;padding:6px;background:#fff;border:0 solid #fff;border-radius:22px;box-shadow:0 20px 42px rgba(16,16,18,.15);box-sizing:border-box;}
.hero-image img{width:100%;height:100%;display:block;margin:0;padding:0;border:0;border-radius:16px;object-fit:cover;object-position:center;}


/* ==========================================================
   IMAGE 1 — TOP LEFT
   ========================================================== */

.hero-image.one{width:310px;height:200px;top:35px;left:65px;transform:rotate(-4deg);z-index:2;}


/* ==========================================================
   IMAGE 2 — CENTER RIGHT
   ========================================================== */

.hero-image.two{width:320px;height:195px;top:125px;right:5px;transform:rotate(4deg);z-index:4;}


/* ==========================================================
   IMAGE 3 — BOTTOM LEFT
   ========================================================== */

.hero-image.three{width:300px;height:190px;left:20px;bottom:25px;transform:rotate(3deg);z-index:3;}


/* ==========================================================
   IMAGE 4 — BOTTOM RIGHT
   ========================================================== */

.hero-image.four{width:200px;height:175px;right:0;bottom:0;transform:rotate(-4deg);z-index:5;}


/* ==========================================================
   IMAGE HOVER
   ========================================================== */

.hero-image{transition:transform .35s ease,box-shadow .35s ease;}
.hero-image.one:hover{transform:rotate(-4deg) translateY(-5px);box-shadow:0 28px 55px rgba(16,16,18,.19);}
.hero-image.two:hover{transform:rotate(4deg) translateY(-5px);box-shadow:0 28px 55px rgba(16,16,18,.19);}
.hero-image.three:hover{transform:rotate(3deg) translateY(-5px);box-shadow:0 28px 55px rgba(16,16,18,.19);}
.hero-image.four:hover{transform:rotate(-4deg) translateY(-5px);box-shadow:0 28px 55px rgba(16,16,18,.19);}


/* ==========================================================
   HANDWRITTEN NOTE
   ========================================================== */

.hero-note{position:absolute;top:70px;right:-18px;width:115px;color:#356866;font-family:"Comic Sans MS","Segoe Print",cursive;font-size:18px;font-weight:600;line-height:1.28;text-align:left;transform:rotate(-7deg);z-index:10;}


/* ==========================================================
   CURVED ARROW
   ========================================================== */

.hero-arrow{position:absolute;top:145px;right:5px;width:72px;height:90px;border-right:3px solid var(--teal);border-bottom:3px solid var(--teal);border-radius:0 0 70px 0;transform:rotate(-18deg);z-index:9;}
.hero-arrow::before{content:"";position:absolute;right:-6px;bottom:-4px;width:16px;height:16px;border-right:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(35deg);}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px){

.hero-inner{grid-template-columns:1fr 1fr;gap:20px;}
.hero-visual{height:390px;transform:scale(.92);transform-origin:center right;}
.hero-image.one{left:35px;}
.hero-image.two{right:-10px;}
.hero-image.three{left:0;}
.hero-image.four{right:-15px;}
.hero-note{right:-25px;}
.hero-arrow{right:-5px;}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px){

.hero{min-height:auto;padding:50px 20px 45px;}
.hero-inner{grid-template-columns:1fr;gap:35px;}
.hero-content{max-width:none;text-align:center;}
.eyebrow{justify-content:center;}
.hero h1{font-size:2.25rem;}
.hero-description{margin-inline:auto;}
.hero-features{justify-content:center;gap:15px;}
.hero-feature{padding-right:15px;margin-right:15px;}
.hero-visual{width:100%;height:350px;max-width:520px;margin:0 auto;transform:none;}
.hero-visual::before{width:400px;height:400px;top:-20px;right:50%;transform:translateX(50%);}
.hero-visual::after{width:350px;height:180px;right:50%;transform:translateX(50%);}
.hero-visual .visual-circle{width:290px;height:290px;top:25px;right:50%;transform:translateX(50%);}
.hero-image.one{width:235px;height:150px;left:5%;top:25px;}
.hero-image.two{width:240px;height:150px;right:0;top:90px;}
.hero-image.three{width:225px;height:145px;left:2%;bottom:15px;}
.hero-image.four{width:155px;height:135px;right:0;bottom:0;}
.hero-note{display:none;}
.hero-arrow{display:none;}

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:480px){

.hero h1{font-size:2rem;}
.hero-features{flex-direction:column;align-items:flex-start;width:max-content;margin-left:auto;margin-right:auto;}
.hero-feature{padding-right:0;margin-right:0;border-right:0;}
.hero-visual{height:290px;}
.hero-visual .visual-circle{width:225px;height:225px;top:20px;}
.hero-image{padding:4px;border-radius:16px;}
.hero-image img{border-radius:12px;}
.hero-image.one{width:180px;height:115px;left:3%;top:18px;}
.hero-image.two{width:185px;height:115px;right:0;top:62px;}
.hero-image.three{width:175px;height:110px;left:1%;bottom:8px;}
.hero-image.four{width:125px;height:105px;right:0;bottom:0;}

}

/* ==========================================================
   INDUSTRIES
   ========================================================== */

.industries{position:relative;padding:72px 5.5% 85px;background:#F8FAFA;}

.section-heading{max-width:700px;margin:0 auto 38px;text-align:center;}

.section-label{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;color:var(--teal);font-family:'Poppins',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}

.section-label::before,.section-label::after{content:"";width:24px;height:2px;border-radius:20px;background:var(--teal);}

.section-heading h2{margin:0;font-family:'Poppins',sans-serif;font-size:clamp(1.8rem,3.2vw,2.55rem);line-height:1.2;font-weight:800;letter-spacing:-.035em;}

.section-heading p{max-width:650px;margin:12px auto 0;color:#72767C;font-size:.83rem;line-height:1.65;}


/* ==========================================================
   INDUSTRY GRID
   ========================================================== */

.industry-grid{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:320px;gap:18px;align-items:stretch;}


/* ==========================================================
   INDUSTRY CARD
   ========================================================== */

.industry-card{position:relative;width:100%;height:320px;min-width:0;overflow:hidden;border:1px solid #E2E7E6;border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(16,16,18,.045);box-sizing:border-box;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}

.industry-card:hover{transform:translateY(-7px);border-color:rgba(18,168,158,.4);box-shadow:0 20px 35px rgba(16,16,18,.1);}


/* ==========================================================
   INDUSTRY IMAGE
   ========================================================== */

.industry-image{position:relative;width:100%;height:145px;overflow:visible;border-radius:17px 17px 0 0;}

.industry-image img{width:100%;height:100%;display:block;object-fit:cover;border-radius:17px 17px 0 0;transition:transform .5s ease;}

.industry-card:hover .industry-image img{transform:scale(1.04);}


/* ==========================================================
   INDUSTRY ICON
   ========================================================== */

.industry-icon{position:absolute;left:16px;bottom:-16px;z-index:10;width:42px;height:42px;display:grid;place-items:center;box-sizing:border-box;border:3px solid #fff;border-radius:12px;color:#fff;box-shadow:0 8px 18px rgba(16,16,18,.14);}

.industry-icon svg{width:19px;height:19px;display:block;overflow:visible;}


/* ==========================================================
   INDUSTRY ICON COLORS
   ========================================================== */

.industry-card:nth-child(1) .industry-icon{background:var(--teal);}

.industry-card:nth-child(2) .industry-icon{background:var(--green);}

.industry-card:nth-child(3) .industry-icon{background:var(--orange);}

.industry-card:nth-child(4) .industry-icon{background:var(--red);}

.industry-card:nth-child(5) .industry-icon{background:var(--purple);}

.industry-card:nth-child(6) .industry-icon{background:var(--blue);}

.industry-card:nth-child(7) .industry-icon{background:#E5A400;}

.industry-card:nth-child(8) .industry-icon{background:var(--teal);}

.industry-card:nth-child(9) .industry-icon{background:var(--orange);}


/* ==========================================================
   INDUSTRY CONTENT
   ========================================================== */

.industry-content{width:100%;height:175px;min-height:175px;padding:28px 18px 18px;box-sizing:border-box;}

.industry-name{margin:0 0 8px;color:#15171A;font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:700;line-height:1.35;}

.industry-description{margin:0;color:#6C7076;font-size:.68rem;line-height:1.65;}

.learn-more{display:inline-flex;align-items:center;gap:5px;margin-top:13px;color:var(--teal);font-family:'Poppins',sans-serif;font-size:.62rem;font-weight:700;text-decoration:none;}

.learn-more span{display:inline-block;transition:transform .25s ease;}

.industry-card:hover .learn-more span{transform:translateX(4px);}


/* ==========================================================
   INDUSTRY QUOTE CARD
   ========================================================== */

.industry-quote-card{position:relative;width:100%;height:320px;min-height:320px;overflow:hidden;padding:30px 26px 25px;border:1px solid rgba(18,168,158,.18);border-radius:17px;background:linear-gradient(145deg,#16ADA3 0%,#0FA69D 55%,#07988F 100%);box-sizing:border-box;color:#fff;box-shadow:0 7px 22px rgba(16,16,18,.045);isolation:isolate;transition:transform .3s ease,box-shadow .3s ease;}

.industry-quote-card:hover{transform:translateY(-7px);box-shadow:0 20px 35px rgba(16,16,18,.14);}


/* ==========================================================
   QUOTE CARD DECORATION
   ========================================================== */

.industry-quote-card::before{content:"";position:absolute;width:190px;height:190px;top:-80px;right:-60px;border-radius:50%;background:rgba(255,255,255,.08);z-index:-1;}

.industry-quote-card::after{content:"";position:absolute;width:260px;height:260px;right:-145px;bottom:-145px;border:1px solid rgba(255,255,255,.12);border-radius:50%;z-index:-1;}

.quote-mark{position:absolute;top:10px;left:22px;color:rgba(255,255,255,.22);font-family:Georgia,serif;font-size:72px;font-weight:700;line-height:1;}

.quote-content{position:relative;z-index:4;max-width:245px;padding-top:5px;}

.quote-label{display:block;margin-bottom:13px;color:rgba(255,255,255,.78);font-family:'Poppins',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}

.quote-content h3{margin:0 0 14px;color:#fff;font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:800;line-height:1.18;letter-spacing:-.025em;}

.quote-content p{margin:0 0 22px;color:rgba(255,255,255,.88);font-size:.67rem;line-height:1.65;}

.quote-button{position:relative;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:999px;background:#fff;color:var(--teal);font-family:'Poppins',sans-serif;font-size:.59rem;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.08);transition:transform .25s ease,box-shadow .25s ease;}

.quote-button span{display:inline-block;transition:transform .25s ease;}

.quote-button:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.13);}

.quote-button:hover span{transform:translateX(4px);}


/* ==========================================================
   QUOTE GROWTH GRAPHIC
   ========================================================== */

.quote-growth{position:absolute;right:18px;bottom:20px;width:135px;height:105px;display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;z-index:2;transform:skewY(-3deg);}

.quote-growth span{display:block;width:21px;border-radius:5px 5px 0 0;background:rgba(255,255,255,.22);}

.quote-growth span:nth-child(1){height:25px;}

.quote-growth span:nth-child(2){height:44px;}

.quote-growth span:nth-child(3){height:64px;}

.quote-growth span:nth-child(4){height:84px;}

.quote-growth::after{content:"";position:absolute;right:-2px;top:-3px;width:75px;height:72px;border-top:4px solid rgba(255,255,255,.7);border-right:4px solid rgba(255,255,255,.7);border-radius:0 60px 0 0;transform:rotate(-38deg);}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1024px){

.industries{padding:60px 4% 70px;}

.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:320px;gap:18px;}

.industry-card{height:320px;}

.industry-quote-card{height:320px;min-height:320px;}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

.industries{padding:55px 20px 65px;}

.section-heading{margin-bottom:30px;}

.section-heading h2{font-size:1.8rem;}

.section-heading p{font-size:.76rem;}

.industry-grid{grid-template-columns:1fr;grid-auto-rows:320px;gap:18px;}

.industry-card{height:320px;}

.industry-quote-card{height:320px;min-height:320px;}

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media(max-width:480px){

.industries{padding:48px 16px 55px;}

.section-heading h2{font-size:1.65rem;}

.section-heading p{font-size:.72rem;}

.industry-grid{grid-template-columns:1fr;grid-auto-rows:320px;gap:16px;}

.industry-card{height:320px;}

.industry-image{height:145px;}

.industry-content{height:175px;min-height:175px;padding:28px 18px 18px;}

.industry-quote-card{height:320px;min-height:320px;padding:28px 23px;}

.quote-content{max-width:245px;}

.quote-content h3{font-size:1.25rem;}

.quote-content p{font-size:.65rem;}

.quote-growth{right:12px;bottom:15px;transform:scale(.85);transform-origin:right bottom;}

}


/* ==========================================================
   STATS
   ========================================================== */

.stats {
    padding:28px 5.5%;
    background:#fff;
    border-top:1px solid #EDF0F0;
    border-bottom:1px solid #EDF0F0;
}

.stats-inner {
    max-width:1500px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.stat {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:65px;
    border-right:1px solid #E5E9E8;
}

.stat:last-child {
    border-right:0;
}

.stat-icon {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#E9FAF8;
    color:var(--teal);
}

.stat-icon svg {
    width:30px;
    height:30px;
}

.stat strong {
    display:block;
    color:#18272A;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;
}

.stat span {
    display:block;
    margin-top:1px;
    color:#7B8086;
    font-size:12px;
}


/* ==========================================================
   TRUSTED BY
   ========================================================== */

.trusted {
    position:relative;
    padding:62px 5.5%;
    overflow:hidden;
    text-align:center;
    background:
        radial-gradient(circle at 10% 50%,rgba(18,168,158,.05),transparent 25%),
        #F7FAFA;
}

.trusted-inner {
    max-width:1000px;
    margin:auto;
}

.trusted-text {
    max-width:720px;
    margin:0 auto 28px;
    color:#6C7177;
    font-size:.77rem;
    line-height:1.7;
}

.logo-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

.client-logo {
    color:#74777B;
    font-family:'Poppins',sans-serif;
    font-size:.92rem;
    font-weight:700;
    opacity:.72;
    filter:grayscale(1);
}


/* =========================================================
   CTA BAND — GRADIENT DESIGN
   ========================================================= */

.cta {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-height: 170px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 5.5% !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            100deg,
            #08aaa7 0%,
            #19b5a8 18%,
            #4fba61 36%,
            #a6c83c 52%,
            #f4c52d 68%,
            #ff982d 83%,
            #f44343 100%
        ) !important;
}


/* =========================================================
   TOP-LEFT CIRCLE
   ========================================================= */

.cta::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -105px;
    left: 13%;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.17);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   BOTTOM-RIGHT CIRCLE
   ========================================================= */

.cta::after {
    content: "";

    position: absolute;

    width: 225px;
    height: 225px;

    right: 17%;
    bottom: -125px;

    border-radius: 50%;

    background: rgba(255, 194, 72, 0.40);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   CTA INNER
   ========================================================= */

.cta-inner {
    position: relative !important;
    z-index: 3 !important;

    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;

    margin-inline: auto !important;

    padding: 28px 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 30px !important;
}


/* =========================================================
   EXTRA DECORATIVE CIRCLE — LEFT
   ========================================================= */

.cta-inner::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: -70px;
    bottom: -105px;

    border-radius: 50%;

    background: rgba(69, 184, 74, 0.28);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   EXTRA DECORATIVE CIRCLE — RIGHT
   ========================================================= */

.cta-inner::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: 4%;
    top: -85px;

    border-radius: 50%;

    background: rgba(240, 68, 79, 0.18);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   CTA CONTENT
   ========================================================= */

.cta-content {
    flex: 1 1 auto !important;

    min-width: 0 !important;

    max-width: none !important;
}


/* =========================================================
   CTA LABEL
   ========================================================= */

.cta-label {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    margin-bottom: 8px !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .12em !important;

    text-transform: uppercase !important;
}


.cta-label::before {
    content: "";

    width: 25px !important;
    height: 2px !important;

    flex: 0 0 25px;

    border-radius: 20px;

    background: #ffffff !important;
}


/* =========================================================
   CTA HEADING
   ========================================================= */

.cta h2 {
    margin: 0 !important;

    color: #ffffff !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 24px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    letter-spacing: -.025em !important;
}


/* =========================================================
   CTA DESCRIPTION
   ========================================================= */

.cta p {
    max-width: 600px !important;

    margin: 7px 0 0 !important;

    color: rgba(255, 255, 255, .96) !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1.45 !important;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.cta-button {
    flex: none !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    min-height: 46px !important;

    padding: 0 21px !important;

    white-space: nowrap !important;

    border-radius: 999px !important;

    background: #ffffff !important;

    color: #00A2A7 !important;

    border: 1px solid #ffffff !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .12) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.cta-button:hover {
    transform: translateY(-3px) !important;

    background: #ffffff !important;

    color: #078C85 !important;

    box-shadow: 0 13px 28px rgba(0, 0, 0, .18) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .cta {
        min-height: auto !important;

        padding: 0 20px !important;
    }

    .cta-inner {
        width: min(100%, calc(100% - 32px)) !important;

        padding: 32px 16px !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        gap: 20px !important;
    }

    .cta h2 {
        font-size: 21px !important;

        line-height: 1.2 !important;
    }

    .cta p {
        font-size: 12px !important;

        line-height: 1.5 !important;
    }

    .cta-button {
        min-height: 46px !important;

        padding: 0 20px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .cta {
        padding: 0 16px !important;
    }

    .cta-inner {
        width: 100% !important;

        padding: 30px 12px !important;
    }

    .cta h2 {
        font-size: 20px !important;
    }

    .cta-label {
        font-size: 9px !important;
    }

    .cta-button {
        width: 100% !important;
    }
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    padding:55px 5.5% 25px;
    background:#101012;
    color:#fff;
}

.footer-inner {
    max-width:1250px;
    margin:auto;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr .8fr .8fr 1.1fr;
    gap:50px;
    padding-bottom:38px;
}

.footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 24px !important;
  padding: 6px 0px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.footer-logo img {
  width: auto !important;
  max-width: none !important;
  height: 52px !important;
  display: block !important;
  object-fit: contain !important;
}


.footer-logo img {
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

.footer-address {
    max-width:330px;
    color:rgba(255,255,255,.6);
    font-size:.7rem;
    line-height:1.7;
}

.footer-contact {
    margin-top:12px;
}

.footer-contact a {
    display:block;
    margin-bottom:5px;
    color:var(--teal);
    font-size:.7rem;
}

.socials {
    display:flex;
    gap:15px;
    margin-top:17px;
}

.socials a {
    color:rgba(255,255,255,.55);
    font-size:.62rem;
    transition:color .2s ease;
}

.socials a:hover {
    color:var(--teal);
}

.footer-title {
    margin-bottom:17px;
    color:var(--teal);
    font-family:'Poppins',sans-serif;
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.footer-links {
    display:flex;
    flex-direction:column;
    gap:9px;
}

.footer-links a {
    color:rgba(255,255,255,.65);
    font-size:.67rem;
    transition:color .2s ease;
}

.footer-links a:hover {
    color:#fff;
}

.map-frame {
    width:100%;
    height:145px;
    border:0;
    border-radius:12px;
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
}

.footer-bottom p {
    color:rgba(255,255,255,.42);
    font-size:.61rem;
}


/* ==========================================================
   WHATSAPP
   ========================================================== */

.whatsapp {
    position:fixed;
    right:25px;
    bottom:22px;
    z-index:999;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 21px;
    border-radius:999px;
    background:var(--teal);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:.67rem;
    font-weight:600;
    box-shadow:0 12px 25px rgba(0,0,0,.22);
    transition:all .25s ease;
}

.whatsapp:hover {
    background:var(--teal-dark);
    transform:translateY(-3px);
}


/* ==========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.menu-button {
    display:none;
    width:40px;
    height:40px;
    border:1px solid #E5E8E8;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
}

.menu-button span {
    display:block;
    width:18px;
    height:2px;
    margin:4px auto;
    border-radius:10px;
    background:#151719;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1050px) {

    .main-nav {
        gap:17px;
    }

    .industry-grid {
        grid-template-columns:repeat(2,1fr);
        max-width:760px;
    }

    .hero-inner {
        gap:25px;
    }

    .hero-image.one {
        right:100px;
    }

    .hero-image.three {
        right:120px;
    }

    .footer-grid {
        grid-template-columns:1.2fr 1fr 1fr;
    }

    .footer-grid > div:last-child {
        grid-column:1/-1;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px) {

    .site-header {
        height:62px;
        padding:0 20px;
    }

    .logo img {
        width:95px;
    }

    .main-nav {
        display:none;
        position:absolute;
        left:15px;
        right:15px;
        top:70px;
        padding:18px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        border:1px solid #E5E8E8;
        border-radius:16px;
        background:#fff;
        box-shadow:0 20px 40px rgba(16,16,18,.12);
    }

    .main-nav.show {
        display:flex;
    }

    .main-nav a {
        padding:12px;
    }

    .main-nav a::after {
        display:none;
    }

    .header-contact {
        display:none;
    }

    .menu-button {
        display:block;
    }

    .hero {
        padding:50px 20px 45px;
    }

    .hero-inner {
        grid-template-columns:1fr;
    }

    .hero-content {
        max-width:none;
        text-align:center;
    }

    .eyebrow {
        justify-content:center;
    }

    .hero h1 {
        font-size:2.25rem;
    }

    .hero-description {
        margin-inline:auto;
    }

    .hero-features {
        justify-content:center;
        gap:15px;
    }

    .hero-visual {
        min-height:250px;
        max-width:500px;
        width:100%;
        margin:auto;
    }

    .hero-image.one {
        width:43%;
        height:120px;
        right:43%;
    }

    .hero-image.two {
        width:46%;
        height:115px;
        right:4%;
        top:55px;
    }

    .hero-image.three {
        width:43%;
        height:110px;
        right:34%;
        bottom:0;
    }

    .hero-image.four {
        width:29%;
        height:95px;
        right:4%;
        bottom:0;
    }

    .hero-note {
        display:none;
    }

    .hero-arrow {
        display:none;
    }

    .industries {
        padding:55px 20px 65px;
    }

    .industry-grid {
        grid-template-columns:1fr;
        max-width:430px;
    }

    .industry-image {
        height:190px;
    }

    .stats {
        padding:10px 20px;
    }

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

    .stat {
        min-height:75px;
    }

    .stat:nth-child(2) {
        border-right:0;
    }

    .stat:nth-child(1),
    .stat:nth-child(2) {
        border-bottom:1px solid #E5E9E8;
    }

    .trusted {
        padding:50px 20px;
    }

    .logo-row {
        justify-content:center;
        gap:22px 35px;
    }

    .cta {
        padding:55px 20px;
    }

    .cta-inner {
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .site-footer {
        padding:45px 20px 25px;
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:35px 25px;
    }

    .footer-grid > div:first-child {
        grid-column:1/-1;
    }

    .footer-grid > div:last-child {
        grid-column:1/-1;
    }

    .footer-bottom {
        flex-direction:column;
        align-items:flex-start;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:480px) {

    .hero h1 {
        font-size:2rem;
    }

    .hero-features {
        flex-direction:column;
        align-items:flex-start;
        width:max-content;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-visual {
        min-height:215px;
    }

    .hero-image.one {
        height:105px;
    }

    .hero-image.two {
        height:100px;
    }

    .hero-image.three {
        height:95px;
    }

    .hero-image.four {
        height:82px;
    }

    .industry-image {
        height:175px;
    }

    .stats-inner {
        grid-template-columns:1fr;
    }

    .stat {
        justify-content:flex-start;
        padding-left:15%;
        border-right:0 !important;
        border-bottom:1px solid #E5E9E8;
    }

    .stat:last-child {
        border-bottom:0;
    }

    .cta h2 {
        font-size:1.9rem;
    }

    .whatsapp {
        right:15px;
        bottom:15px;
        padding:11px 16px;
        font-size:.6rem;
    }

}

/* ==========================================================
   FINAL HERO OVERRIDES — SINGLE RESPONSIVE IMAGE
   ========================================================== */

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 470px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    isolation: isolate;
}

.hero-visual::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(18,168,158,.16) 0%,
        rgba(18,168,158,.08) 38%,
        rgba(18,168,158,0) 72%
    );
    z-index: -2;
    pointer-events: none;
}

.hero-visual::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 220px;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(18,168,158,.06);
    filter: blur(35px);
    z-index: -2;
    pointer-events: none;
}

.hero-single-image {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    border: 7px solid rgba(255,255,255,.95);
    box-shadow:
        0 25px 55px rgba(16,16,18,.14),
        0 8px 20px rgba(18,168,158,.08);
    transform: rotate(1.5deg);
    transition: transform .4s ease, box-shadow .4s ease;
}

.hero-single-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.hero-single-image:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:
        0 32px 65px rgba(16,16,18,.18),
        0 12px 28px rgba(18,168,158,.12);
}

.hero-single-image:hover img {
    transform: scale(1.025);
}

/* ==========================================================
   FINAL HERO RESPONSIVE OVERRIDES
   ========================================================== */

@media (max-width: 1100px) {
    .hero {
        padding: 65px 4% 55px;
    }

    .hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .hero h1 {
        font-size: clamp(2.3rem, 4.5vw, 3.4rem);
    }

    .hero-description {
        font-size: .88rem;
    }

    .hero-visual {
        height: 400px;
        max-width: 570px;
        transform: none;
    }

    .hero-single-image {
        height: 365px;
        border-radius: 24px;
        border-width: 6px;
    }

    .hero-visual::before {
        width: 440px;
        height: 440px;
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: auto;
        padding: 50px 20px 50px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        max-width: none;
        text-align: center;
    }

    .eyebrow {
        justify-content: center;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero-description {
        max-width: 600px;
        margin: 20px auto 25px;
        font-size: .82rem;
    }

    .hero-button {
        padding: 15px 27px;
        font-size: .74rem;
    }

    .hero-features {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 32px;
    }

    .hero-feature {
        padding-right: 15px;
        margin-right: 15px;
    }

    .hero-visual {
        width: 100%;
        height: auto;
        min-height: 320px;
        max-width: 620px;
        margin: 0 auto;
        transform: none;
    }

    .hero-single-image {
        width: 100%;
        height: 320px;
        border-radius: 22px;
        border-width: 5px;
        transform: rotate(0deg);
    }

    .hero-single-image:hover {
        transform: translateY(-4px);
    }

    .hero-visual::before {
        width: 380px;
        height: 380px;
    }

    .hero-visual::after {
        width: 350px;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 45px 16px 45px;
    }

    .hero h1 {
        font-size: 1.95rem;
    }

    .hero-description {
        font-size: .76rem;
        line-height: 1.65;
    }

    .hero-button {
        padding: 14px 23px;
        font-size: .7rem;
    }

    .hero-features {
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        gap: 12px;
    }

    .hero-feature {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }

    .hero-visual {
        min-height: 230px;
    }

    .hero-single-image {
        width: 100%;
        height: 230px;
        border-radius: 18px;
        border-width: 4px;
    }

    .hero-visual::before {
        width: 280px;
        height: 280px;
    }
}