:root{
  --bg:#0b0b0c;
  --paper:#ffffff;
  --ink:#101114;
  --muted:#5c6068;
  --line:#e6e7ea;
  --accent:#e07a1f; /* orange */
  --accent-2:#ff9b3a;
  --card:#f7f8fa;
  --radius:18px;
  --shadow: 0 12px 30px rgba(16,17,20,.10);
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%; height:auto; display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:72px 0}
.section-tight{padding:46px 0}
.kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px 0;
}
h1,h2,h3{margin:0}
h1{
  font-size:44px;
  line-height:1.06;
  letter-spacing:-.02em;
}
@media (max-width:860px){
  h1{font-size:36px}
}
@media (max-width:520px){
  h1{font-size:32px}
}
h2{
  font-size:28px;
  letter-spacing:-.01em;
  margin-bottom:12px;
}
p{margin:0; color:var(--muted); line-height:1.6}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(170%) blur(10px);
  border-bottom:1px solid rgba(230,231,234,.9);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width:220px;
}
.brand img{width:170px; height:auto}
.nav{
  display:flex; align-items:center; gap:18px;
  font-size:14px;
  color:#2a2d33;
}
.nav a{padding:10px 8px; border-radius:12px}
.nav a:hover{background:#f2f3f6}
@media (max-width:860px){
  .nav{display:none}
}

.actions{
  display:flex; gap:10px; align-items:center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:650;
  font-size:14px;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{border-color:#d9dbe0; box-shadow:0 10px 18px rgba(16,17,20,.08)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg, var(--accent) 0%, #d66f19 100%);
  color:#fff;
  border-color:transparent;
}
.btn-primary:hover{color:#fff; box-shadow:0 12px 22px rgba(224,122,31,.25)}
.btn-ghost{background:transparent}
@media (max-width:520px){
  .btn{padding:11px 12px}
  .brand img{width:150px}
}

.hero{
  padding:46px 0 18px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:22px}
}
.hero-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-media{
  position:relative;
  aspect-ratio: 16/9;
  background: #f1f2f5;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.badge{
  display:inline-flex; align-items:center;
  padding:9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:13px;
  color:#2c2f36;
}
.badge strong{color:#111}

.hero-copy p{
  margin-top:14px;
  max-width:56ch;
}
.hero-cta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:18px;
}
.small{
  font-size:13px;
  color:var(--muted);
  margin-top:12px;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 22px rgba(16,17,20,.06);
}
.card h3{
  font-size:16px;
  margin-bottom:8px;
}
.list{
  margin:0; padding-left:18px;
  color:var(--muted);
  line-height:1.7;
}
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.brand-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  margin-top:16px;
}
.logo-tile{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
}
.logo-tile img{height:28px; width:auto}
.logo-tile span{font-weight:650; font-size:13px; color:#2a2d33}

.gallery{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:18px;
}
@media (max-width:900px){.gallery{grid-template-columns:1fr}}
.gallery .big{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.gallery .big img{width:100%; height:100%; object-fit:cover}
.gallery .stack{
  display:grid; gap:14px;
}
.gallery .stack .tile{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.gallery .stack img{width:100%; height:100%; object-fit:cover}

.contact-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:14px;
  margin-top:18px;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.map{
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
  min-height:340px;
}
.map iframe{width:100%; height:100%; border:0; min-height:340px}

.footer{
  padding:26px 0 40px;
  border-top:1px solid var(--line);
  background:#fff;
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}

.notice{
  border-left:4px solid var(--accent);
  background:#fff;
  border-radius:14px;
  border:1px solid var(--line);
  padding:12px 14px;
  margin-top:14px;
}
.notice p{color:#40444c}