:root{
            --primary:#FFFFFF; /* 主色 调 */
            --secondary:#b6b5d4; /* 次主色 */
            --accent1:#A757B4; /* 辅色1（主按钮色） */
            --accent2:#F9CC5C; /* 辅色2（徽章/提示） */
            --accent3:#7B7F72; /* 辅色3（标题/强调） */
            --muted:#505358; /* 次要文字 */
            --card:#ffffff; /* 卡片背景 */
            --btn-hover: #8b57a8;
            --control-bg: rgba(0,0,0,0.35);
        }

* {
    box-sizing: border-box
}

html {
    scroll-padding-top: 80px; /* 影响所有滚动到锚点的行为 */
    scroll-behavior: smooth;  /* 平滑滚动 */
}

body {
    font-family: Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background: var(--bg);
    color: #111;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px
}

header {
    background: linear-gradient(90deg, var(--primary), #285e8e);
    color: #fff
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700
}

.brand svg {
    width: 40px;
    height: 40px
}

nav a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    margin-left: 18px
}

.hero {
    padding: 48px 0;
    text-align: left
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: center
}

.hero h1 {
    font-size: 2rem;
    margin: 0 0 12px
}

.hero p {
    color: var(--muted);
    margin: 0 0 18px
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #222;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600
}

.card {
    background: var(--card);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.06)
}

section {
    padding: 40px 0
}

h2 {
    margin: 0 0 12px
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.service h3 {
    margin: 0 0 8px
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

footer {
    padding: 20px 0;
    text-align: center;
    color: var(--muted)
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px
}

@media (max-width:900px) {
    .hero-grid {
        grid-template-columns: 1fr
    }

    .grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:600px) {
    .topbar {
        padding: 12px
    }

    .grid,
    .team-grid {
        grid-template-columns: 1fr
    }

    .brand span {
        display: none
    }

    .topnav {
        display: none
    }

    .mobile-menu {
        display: inline-block
    }
}

.mobile-menu {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px
}

/* ===== Map / Viewer styles ===== */
.map-wrapper{position:relative;height:100vh;width:100vw;overflow:hidden;background:#000}
.map-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* Make the canvas shrinkwrap to the image so percentage-positioned markers align to the visible image
    - canvas no longer fills the whole viewport by default; it will size to the rendered image
    - image constrained by max-width / max-height so it stays inside viewport
    - transform (translate/scale) still applies to canvas and its children (markers)
*/
.map-canvas{position:relative;overflow:visible;touch-action:none;display:inline-block;transform-origin:0 0;max-width:100%;max-height:100vh}
.map-canvas img#map-img{display:block;width:auto;height:auto;max-width:100%;max-height:100vh;user-select:none;pointer-events:none}

.map-toolbar{position:fixed;right:12px;top:12px;z-index:90;display:flex;gap:8px;padding:6px;}
.map-toolbar button{background:rgba(0,0,0,0.5);border:0;border-radius:8px;padding:8px 10px;cursor:pointer;color:#fff}
.map-toolbar button:hover{background:rgba(255,255,255,0.2)}

.marker{position:absolute;transform:translate(-50%,-100%);width:18px;height:18px;border-radius:50%;background:var(--accent1);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,0.25);cursor:pointer;z-index:50}
.marker:focus{outline:2px solid rgba(0,0,0,0.12)}

.map-tooltip{position:fixed;z-index:70;background:#fff;padding:8px 10px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.24);transform:translate(-50%,-120%);min-width:160px}

.map-overlay{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,0.6)}

.map-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:80}
.map-modal .map-modal-card{background:var(--card);padding:20px;border-radius:12px;max-width:820px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,0.45);position:relative}
.map-modal .map-modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:18px;cursor:pointer}
.map-modal .muted{color:var(--muted);margin-top:6px}

/* helper when hidden - we keep hidden class, but modal/overlay remove hidden to show */
.map-modal.hidden{display:none}
.map-overlay.hidden{display:none}
.map-tooltip.hidden{display:none}

@media (max-width:900px){.map-toolbar{left:8px;top:8px}.map-tooltip{min-width:140px}}

/* left hidden sidebar */
.left-sidebar{position:fixed;left:0;top:0;height:100vh;width:260px;transform:translateX(-100%);transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .28s ease;z-index:100;box-shadow:8px 0 40px rgba(0,0,0,0.28);background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff);padding:16px 12px;opacity:0;pointer-events:none}
.left-sidebar.open{transform:translateX(0);opacity:1;pointer-events:auto}
.left-sidebar-inner{overflow:auto;height:100%}
.left-sidebar h4{margin:4px 0 8px}
.left-sidebar ul{padding-left:16px;color:var(--muted)}
.left-sidebar nav a{display:block;padding:8px 6px;color:var(--accent3);text-decoration:none;border-radius:6px}
.left-sidebar nav a:hover{background:rgba(167,87,180,0.06)}
.left-sidebar-handle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:12px;height:88px;background:linear-gradient(90deg,rgba(167,87,180,0.95),rgba(167,87,180,0.7));border-top-right-radius:6px;border-bottom-right-radius:6px;z-index:101;cursor:pointer;transition:width .18s ease,opacity .18s ease}
.left-sidebar-handle:focus{outline:2px solid rgba(167,87,180,0.35)}
.left-sidebar-handle:hover{width:18px}

/* backdrop shown when sidebar open - sits below sidebar but above map */
.sidebar-backdrop{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,0.28);transition:opacity .28s ease;opacity:0;pointer-events:none}
.sidebar-backdrop:not(.hidden){opacity:1;pointer-events:auto}

@media (max-width:700px){.left-sidebar{width:92vw}.left-sidebar-handle{height:64px}}

@media (max-width:700px){.left-sidebar{width:220px}.left-sidebar-handle{height:64px}}