*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,sans-serif;color:#333;background:#fff}

/* GLOBAL */
.container{width:90%;max-width:1200px;margin:auto}
.flex{display:flex;justify-content:space-between;align-items:center}
.btn{padding:12px 26px;border-radius:4px;text-decoration:none;font-weight:600}
.primary{background:#ff6f61;color:#fff}
.outline{border:2px solid #fff;color:#fff}
.colored{border-color:#ff6f61;color:#ff6f61}

/* TOPBAR */
.topbar{background:#2e2e2e;color:#fff;font-size:13px;padding:8px 0}

/* HEADER */
.header{background:#3a3a3a}
.header-flex{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{color:#fff;font-weight:700}
.nav a{color:#ccc;margin:0 12px;text-decoration:none}
.nav a.active,.nav a:hover{color:#fff}

/* HERO */
.hero{background:#3a3a3a;color:#fff;padding:120px 0 140px;position:relative}
.hero-content{max-width:650px}
.hero h1{font-size:48px;margin-bottom:20px}
.hero p{opacity:.9;margin-bottom:35px}
.hero-buttons .btn{margin-right:15px}

/* WAVE */
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:80px;
background:url("../images/wave.svg") no-repeat center/cover}

/* SERVICES */
.services{padding:90px 0}
.services h2{text-align:center;margin-bottom:60px;color:#272460}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}
.service-card{text-align:left}
.service-card .icon{width:48px;height:48px;background:#ff6f61;color:#fff;
display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:15px}
.service-card a{color:#ff6f61;text-decoration:none;font-weight:500}

/* SPLIT */
.split{padding:90px 0}
.split-flex{display:flex;align-items:center;gap:60px}
.reverse .split-flex{flex-direction:row-reverse}
.split img{max-width:100%}

/* FEATURES */
.feature{display:flex;gap:15px;margin-top:20px}

/* EXPERTISE */
.expertise{padding:90px 0;background:#f8f8f8}
.skill{margin-bottom:20px}
.bar{height:8px;background:#ddd;border-radius:4px;margin-top:6px}
.bar div{height:8px;background:#ff6f61;border-radius:4px}

/* FOOTER */
.footer{background:#2e2e2e;color:#ccc;padding:70px 0 30px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.footer a{color:#ccc;text-decoration:none;display:block;margin:6px 0}
.copy{text-align:center;margin-top:40px;font-size:13px}