*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333;background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{background:#f5a623;color:#000;font-size:14px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 16px}
.tel{font-weight:600;letter-spacing:.05em}
.top-links{display:flex;align-items:center;gap:20px}
.top-links a:hover{text-decoration:underline}
.socials{display:flex;gap:10px;padding-left:8px}
.socials a{width:24px;height:24px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}

/* Header */
.header{background:#f5a623}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:16px}
.logo img{height:80px;width:auto}
.nav{list-style:none;display:flex;gap:4px;margin:0;padding:0;color:#000;font-weight:700;font-size:14px}
.nav a{padding:12px 16px;display:inline-block}
.nav a:hover{color:#fff}
.nav a.active{background:#000;color:#fff;border-radius:999px;padding:12px 24px}
.btn-profile{background:#fff;color:#000;font-weight:700;font-size:14px;padding:12px 20px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.btn-profile:hover{background:#f4f4f4}

/* Search */
.searchbar{background:#000}
.searchbar-inner{display:flex;justify-content:flex-end;padding:12px 16px}
.searchbar input{background:#2a2a2a;color:#fff;border:1px solid #444;border-radius:4px;padding:8px 12px;font-size:14px;width:100%;max-width:320px;outline:none}
.searchbar input:focus{border-color:#f5a623}
.searchbar input::placeholder{color:#999}

/* Feature sections */
.feature{position:relative;background-size:cover;background-position:center;min-height:560px;display:flex;align-items:center}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.overlay.dark{background:rgba(0,0,0,.6)}
.feature-inner{position:relative;width:100%;padding:64px 16px}
.feature-box{max-width:420px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:32px;color:#fff}
.feature-box.right{margin-left:auto}
.feature-box h2{font-size:36px;font-weight:900;letter-spacing:.05em;margin:0 0 16px}
.feature-box p,.feature-box li{color:rgba(255,255,255,.95)}
.feature-box ul{padding-left:20px;margin:0}
.feature-box li{margin-bottom:4px}

/* Rule */
.rule{width:64px;height:4px;background:#f5a623;margin-bottom:20px}
.rule.center{margin-left:auto;margin-right:auto}
.rule.small{width:48px;height:4px;margin-top:12px;margin-bottom:32px}
.rule.xs{width:40px;height:2px;margin-top:8px}

/* About */
.about{padding:80px 0;background:#fff;text-align:center}
.about-inner{max-width:820px;margin:0 auto;padding:0 16px}
.about h2{font-size:44px;font-weight:900;color:#000;letter-spacing:.05em;margin:0}
.about .rule{margin:24px auto}
.about p{color:#555;font-size:18px;line-height:1.7}
.btn-read{display:inline-block;margin-top:32px;background:#f5a623;color:#000;font-weight:700;padding:12px 32px;border-radius:999px;transition:.2s}
.btn-read:hover{background:#000;color:#f5a623}

/* Services */
.services{padding:64px 0;background:#fafafa}
.eyebrow{text-align:center;font-size:12px;letter-spacing:.3em;color:#f5a623;font-weight:700;margin:0}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:24px}
.card{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.1);display:block}
.card img{width:100%;height:192px;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.05)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2),transparent)}
.card-title{position:absolute;left:0;right:0;bottom:0;padding:16px;text-align:center;color:#fff}
.card-title h4{margin:0;font-weight:900;letter-spacing:.05em}

/* Certification */
.cert{position:relative;background-size:cover;background-position:center;padding:96px 0}
.cert-inner{position:relative;max-width:768px;margin:0 auto;padding:0 16px;text-align:center;color:#fff}
.cert h2{font-size:36px;font-weight:900;letter-spacing:.05em;margin:0}
.cert .rule{margin:24px auto}
.cert p{font-size:18px;line-height:1.7}

/* Contact */
.contact{padding:80px 0;background:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.contact h3{font-weight:900;color:#000;font-size:20px;letter-spacing:.05em;margin:0}
.contact p{font-weight:700;color:#444;margin:4px 0}
.contact a:hover{color:#f5a623}

/* Footer */
.footer{background:#000;color:#fff;padding:40px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo img{height:48px;width:auto}
.footer-logo span{font-weight:700;letter-spacing:.1em}
.footer-nav{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;color:#ccc}
.footer-nav a:hover{color:#f5a623}
.copy{font-size:12px;color:#777;margin:0}

/* Responsive */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .feature-box h2,.about h2{font-size:28px}
  .nav{flex-wrap:wrap;justify-content:center}
}
