:root {
  --lk-blue: #0d6efd;
  --lk-yellow: #ffc107;
  --lk-dark: #152238;
  --lk-muted: #667085;
  --lk-light: #f6f8fb;
  --lk-border: #e6eaf0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  color: #243044;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.75;
  background: #fff;
}
a { color: var(--lk-blue); text-decoration: none; }
a:hover { color: #084298; }
img { max-width: 100%; height: auto; }
.site-header .navbar-brand img { border-radius: 8px; }
.navbar .nav-link { font-weight: 600; color: #334155; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--lk-blue); }
.hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #0b2f63;
}
.hero-slide {
  min-height: 68vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.hero-slide::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 25, 54, .82), rgba(8, 25, 54, .52), rgba(8, 25, 54, .12));
}
.hero .container, .page-hero .container { position: relative; z-index: 1; }
.hero h1, .page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.section-pad { padding: 80px 0; }
.section-muted { background: var(--lk-light); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--lk-blue);
  background: rgba(13, 110, 253, .08);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-weight: 700;
  font-size: .9rem;
}
.section-title {
  font-weight: 800;
  color: var(--lk-dark);
  letter-spacing: 0;
}
.service-card, .project-card, .blog-card, .quote-panel, .admin-card {
  border: 1px solid var(--lk-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(21, 34, 56, .06);
}
.service-card, .project-card, .blog-card { height: 100%; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover, .project-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(21, 34, 56, .1); }
.icon-box {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(13, 110, 253, .1);
  color: var(--lk-blue);
  font-size: 1.35rem;
}
.btn { border-radius: 8px; font-weight: 700; }
.btn-warning { color: #172033; }
.image-zoom { overflow: hidden; }
.image-zoom img { transition: transform .35s ease; }
.image-zoom:hover img { transform: scale(1.06); }
.counter-number { font-size: 2.6rem; font-weight: 800; color: var(--lk-blue); }
.breadcrumb a { color: #e7f0ff; }
.toc-card {
  position: sticky;
  top: 92px;
  border: 1px solid var(--lk-border);
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}
.toc-card a {
  display: block;
  padding: .35rem .5rem;
  border-radius: 6px;
  color: #405065;
  font-size: .95rem;
}
.toc-card a:hover { background: rgba(13, 110, 253, .08); color: var(--lk-blue); }
.article-content h2 { scroll-margin-top: 100px; color: var(--lk-dark); font-weight: 800; margin-top: 2.5rem; }
.article-content h3 { color: #27364d; font-weight: 750; margin-top: 1.5rem; }
.article-content p, .article-content li { color: #405065; }
.timeline {
  position: relative;
  padding-left: 1.5rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--lk-blue), var(--lk-yellow));
}
.timeline-item {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border: 1px solid var(--lk-border);
  border-radius: 8px;
  background: #fff;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: 1.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lk-yellow);
  border: 3px solid var(--lk-blue);
}
.quote-form fieldset {
  border: 1px solid var(--lk-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: #fff;
}
.quote-form legend {
  float: none;
  width: auto;
  padding: 0 .5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--lk-dark);
}
.result-sticky {
  position: sticky;
  top: 92px;
}
.table-price th { background: #eef5ff; }
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 1020;
  box-shadow: 0 12px 34px rgba(13, 110, 253, .28);
}
.site-footer { background: #111827; }
.footer-links a { color: rgba(255,255,255,.68); }
.footer-links a:hover { color: #fff; }
.social-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,.1);
}
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.float-btn {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.45rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.float-btn:hover { color: #fff; transform: translateY(-2px); }
.float-btn.whatsapp { background: #25d366; }
.float-btn.phone { background: var(--lk-blue); }
.pulse { animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.back-to-top {
  position: fixed;
  right: 86px;
  bottom: 28px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #111827;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1030;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
@media (max-width: 991.98px) {
  .section-pad { padding: 56px 0; }
  .hero, .hero-slide { min-height: 620px; }
  .toc-card, .result-sticky { position: static; }
  .sticky-cta { width: calc(100% - 32px); text-align: center; }
  .floating-actions { right: 14px; bottom: 82px; }
  .back-to-top { display: none; }
}