:root{
  --orange:#f47a20;
  --green:#287a35;
  --blue:#0d4d9c;
  --dark:#183248;
  --light:#f4f9fb;
  --white:#ffffff;
  --shadow:0 16px 40px rgba(20,60,90,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  color:var(--dark);
  line-height:1.7;
  background:#fff;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);box-shadow:0 2px 18px rgba(0,0,0,.08)
}
.nav-wrap{min-height:82px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-mark{
  width:52px;height:52px;border:3px solid var(--orange);border-radius:50%;
  display:grid;place-items:center;color:var(--orange);font-size:23px;font-weight:900
}
.brand strong{display:block;color:var(--orange);font-size:22px}
.brand small{display:block;color:#777}
.nav{display:flex;gap:25px}
.nav a{text-decoration:none;font-weight:700}
.nav a:hover{color:var(--orange)}
.header-phone{
  text-decoration:none;background:var(--green);color:#fff;font-weight:800;
  padding:11px 18px;border-radius:999px
}
.menu-button{display:none;border:0;background:transparent;font-size:28px}
.hero{
  min-height:650px;position:relative;display:flex;align-items:center;
  background:
    linear-gradient(90deg,rgba(245,255,249,.98) 0%,rgba(245,255,249,.88) 44%,rgba(245,255,249,.18) 100%),
    url("assets/brand-banner.jpg") center/cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.15))
}
.hero-content{position:relative;z-index:1;padding:85px 0}
.eyebrow,.section-label{
  color:var(--green);font-weight:900;letter-spacing:.12em;margin:0 0 8px
}
.hero h1{
  font-size:clamp(42px,6vw,76px);line-height:1.18;margin:0 0 22px;
  color:var(--blue);max-width:850px
}
.hero-text{font-size:21px;max-width:680px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.button{
  display:inline-flex;justify-content:center;align-items:center;text-decoration:none;
  padding:15px 24px;border-radius:999px;font-weight:900;transition:.2s
}
.button:hover{transform:translateY(-2px)}
.primary{background:var(--blue);color:#fff}
.secondary{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.hero-points{display:flex;gap:25px;flex-wrap:wrap;font-weight:800;color:var(--green)}
.brand-strip{padding:28px 0;background:#fff}
.brand-strip img{margin:auto;border-radius:18px;box-shadow:var(--shadow)}
.section{padding:90px 0}
.section-alt{background:var(--light)}
.section h2{font-size:clamp(32px,4vw,50px);line-height:1.25;margin:0 0 24px;color:var(--blue)}
.two-column{display:grid;grid-template-columns:1.3fr .8fr;gap:50px;align-items:start}
.info-card{
  background:#fff;border-top:6px solid var(--orange);padding:30px;border-radius:18px;
  box-shadow:var(--shadow)
}
.info-card a{color:var(--blue);font-weight:900}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{
  background:#fff;padding:28px;border-radius:18px;box-shadow:0 10px 28px rgba(20,60,90,.08);
  border:1px solid #e5eff4
}
.service-card h3{margin:8px 0;font-size:23px;color:var(--blue)}
.service-icon{font-size:40px}
.area-panel{
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,#effaf2,#eef7ff);padding:45px;border-radius:24px
}
.area-tags{display:flex;flex-wrap:wrap;gap:12px}
.area-tags span{
  background:#fff;padding:12px 20px;border-radius:999px;font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.08)
}
.contact-section{background:linear-gradient(135deg,var(--blue),#113969);color:#fff}
.contact-box{display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact-section h2{color:#fff}
.light{color:#cce8ff}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.white{background:#fff;color:var(--blue)}
.outline-white{border:2px solid #fff;color:#fff}
footer{background:#102638;color:#dbe7ef;padding:42px 0 0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.15);padding:16px;margin-top:25px}
.floating-call{
  position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;text-decoration:none;
  font-size:28px;box-shadow:var(--shadow);z-index:1000
}
@media (max-width:900px){
  .menu-button{display:block}
  .header-phone{display:none}
  .nav{
    display:none;position:absolute;top:82px;left:0;right:0;background:#fff;
    padding:20px;flex-direction:column;box-shadow:0 15px 25px rgba(0,0,0,.1)
  }
  .nav.open{display:flex}
  .two-column,.area-panel,.footer-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .contact-box{display:block}
}
@media (max-width:620px){
  .container{width:min(100% - 28px,1160px)}
  .brand strong{font-size:18px}
  .brand small{font-size:12px}
  .hero{min-height:590px}
  .hero-content{padding:65px 0}
  .hero h1{font-size:40px}
  .hero-text{font-size:18px}
  .service-grid{grid-template-columns:1fr}
  .section{padding:65px 0}
  .brand-strip{display:none}
}