:root{
  --brand:#FF8A00;
  --brand-2:#007F5F;
  --dark:#0F172A;
  --text:#0B1020;
  --muted:#475569;
  --bg:#F6FAFF;
  --card:#FFFFFF;
  --ring:0 0 0 4px #007F5F33;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--text);
  background: var(--bg);
}
.container{width:min(1120px,100%); margin:0 auto; padding:0 20px}
/* header */
.header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand .logo{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),#FFD166)}
.nav a{color:#0f172a; text-decoration:none; font-weight:600}
.menu{display:flex; gap:20px; align-items:center}
.cta{display:inline-flex; gap:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid #cbd5e1}
.btn.primary{background:linear-gradient(135deg,var(--brand),#FFBD59); border-color:#f59e0b}
.btn.ghost{background:#fff}
/* hero */
.hero{position:relative; overflow:hidden; background:#000; color:#fff}
.slider{position:relative; height:58vh; min-height:420px}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 600ms ease-in-out; background-size:cover; background-position:center}
.slide.active{opacity:1}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%, rgba(0,0,0,.0));
}
.hero-content{position:relative; z-index:2; padding:60px 0}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.2; margin:0 0 10px}
.hero p{max-width:640px; margin:0 0 18px; color:#e2e8f0}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0}
.badge{font-size:13px; padding:6px 10px; border-radius:999px; background:#ffffff22; border:1px solid #ffffff55}
/* quick actions */
.quick{transform:translateY(-24px)}
.card{
  background:var(--card); border:1px solid #e5e7eb; border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.quick-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card h3{margin:6px 0 8px}
.card p{margin:0; color:var(--muted)}
/* services */
.section{padding:40px 0}
.section h2{font-size:clamp(22px,3vw,32px); margin:0 0 8px}
.section .sub{color:var(--muted); margin:0 0 20px}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.service{border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff}
.service h3{margin:6px 0 8px; font-size:18px}
/* about */
.about{display:grid; gap:18px; grid-template-columns:1.2fr 1fr}
.kv{border-radius:16px; overflow:hidden; aspect-ratio:16/10; background: url('assets/img/hero-2.jpg') center/cover no-repeat}
@media (max-width: 900px){ .about{grid-template-columns:1fr} .slider{height:54vh} }
/* features */
.features{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{padding:16px; border:1px dashed #cbd5e1; border-radius:14px; background:#fff}
/* footer */
.footer{background:#0f172a; color:#cbd5e1; padding:32px 0; margin-top:30px}
.footer a{color:#e2e8f0; text-decoration:none}
/* utility */
.hidden{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}