*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0a0a0a;--surface:#111111;--surface2:#171717;--surface3:#1e1e1e;--surface4:#252525;
    --accent:#d4a843;--accent-light:#e4be5a;--accent-dim:rgba(212,168,67,.1);--accent-glow:rgba(212,168,67,.04);
    --text:#f0ece4;--text-secondary:#a8a29e;--text-muted:#6b6560;
    --border:#2a2520;--border-focus:#3d3528;
    --success:#34d399;--success-dim:rgba(52,211,153,.1);
    --error:#f87171;--error-dim:rgba(248,113,113,.08);
    --radius:10px;--radius-lg:16px;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:9999}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
a{text-decoration:none;color:inherit}
section{padding:100px 0}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,10,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-brand{font-family:'DM Mono',monospace;font-size:1rem;color:var(--accent);letter-spacing:.06em;text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-brand .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:.82rem;color:var(--text-secondary);text-decoration:none;letter-spacing:.03em;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-cta{font-size:.78rem;padding:8px 22px;background:var(--accent);color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:600;letter-spacing:.04em;transition:all .3s}
.nav-cta:hover{background:var(--accent-light);transform:translateY(-1px)}

/* HERO */
.hero{min-height:400px;display:flex;align-items:center;padding-top:72px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(212,168,67,.06) 0%,transparent 55%);top:-180px;left:-100px}
.hero-content{position:relative;z-index:1;text-align:center;max-width:660px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px;font-size:.78rem;color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);transition:color .2s}.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.3}.breadcrumb .current{color:var(--accent)}
.hero h1{font-size:3rem;font-weight:900;line-height:1.2;margin-bottom:16px;letter-spacing:-.03em}
h1 .accent{color:var(--accent)}
.hero .subtitle{font-size:1rem;color:var(--text-secondary);line-height:1.8}

/* QUICK CONTACT BAR */
.quick-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:60px 0;border-bottom:1px solid var(--border)}
.qc-card{display:flex;align-items:center;gap:16px;padding:28px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .3s}
.qc-card:hover{border-color:rgba(212,168,67,.3);transform:translateY(-2px)}
.qc-card .qc-icon{width:52px;height:52px;background:var(--accent-dim);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.qc-card h3{font-size:.82rem;font-weight:400;color:var(--text-muted);margin-bottom:4px}
.qc-card .qc-value{font-size:1.05rem;font-weight:700}
.qc-card .qc-value a{color:var(--text);transition:color .2s}
.qc-card .qc-value a:hover{color:var(--accent)}

/* MAIN SECTION */
.section-tag{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:.72rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.section-tag::before{content:'';width:24px;height:1px;background:var(--accent)}
.section-title{font-size:2.2rem;font-weight:900;letter-spacing:-.02em;margin-bottom:12px}
.section-desc{font-size:.92rem;color:var(--text-secondary);max-width:560px;line-height:1.8;margin-bottom:48px}

/* CONTACT FORM + INFO */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}

/* FORM */
.contact-form{
    padding:36px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.cf-title{font-size:1.2rem;font-weight:800;margin-bottom:6px}
.cf-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:28px}
.fg{margin-bottom:20px}
.fl{display:block;font-size:.82rem;font-weight:600;margin-bottom:8px}
.fl .req{color:var(--error);margin-left:2px}
.fl .opt{color:var(--text-muted);font-weight:400;font-size:.72rem;margin-left:4px}
.fi{width:100%;padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'Noto Sans SC',sans-serif;font-size:.88rem;transition:all .25s;outline:none}
.fi::placeholder{color:var(--text-muted);font-size:.84rem}
.fi:hover{border-color:var(--border-focus)}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,168,67,.08);background:var(--surface3)}
.fi.error{border-color:var(--error);box-shadow:0 0 0 3px var(--error-dim)}
.fi.valid{border-color:rgba(52,211,153,.4)}
textarea.fi{resize:vertical;min-height:110px}
select.fi{cursor:pointer}
.ferr{font-size:.72rem;color:var(--error);margin-top:5px;display:none}
.ferr.show{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fhint{font-size:.72rem;color:var(--text-muted);margin-top:5px}

/* SUBJECT SELECT */
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subject-option{position:relative}
.subject-option input{position:absolute;opacity:0;width:0;height:0}
.subject-option label{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 8px;
    background:var(--surface2);
    border:1.5px solid var(--border);
    border-radius:8px;
    font-size:.78rem;color:var(--text-secondary);
    cursor:pointer;transition:all .3s;text-align:center;
}
.subject-option label:hover{border-color:var(--border-focus)}
.subject-option input:checked+label{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);font-weight:600}
.subject-option label .so-ico{font-size:.9rem}

.btn-submit{
    width:100%;padding:14px;
    background:var(--accent);color:#000;
    font-weight:700;font-size:.9rem;
    border:none;border-radius:var(--radius);
    cursor:pointer;letter-spacing:.04em;
    transition:all .3s;font-family:'Noto Sans SC',sans-serif;
    position:relative;overflow:hidden;
}
.btn-submit:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,168,67,.2)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-submit .spinner{display:none;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .6s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-submit.loading .btn-text{display:none}
.btn-submit.loading .spinner{display:block}

/* CONTACT INFO SIDEBAR */
.contact-info{display:flex;flex-direction:column;gap:20px}
.ci-card{padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .3s}
.ci-card:hover{border-color:rgba(212,168,67,.2)}
.ci-card .ci-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ci-card .ci-icon{width:40px;height:40px;background:var(--accent-dim);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.ci-card .ci-icon.text{font-size:.78rem;font-weight:700;color:var(--accent)}
.ci-card h3{font-size:1rem;font-weight:700}
.ci-card .ci-body p{font-size:.85rem;color:var(--text-secondary);line-height:1.8}
.ci-card .ci-body a{color:var(--accent);font-weight:500;transition:opacity .2s}
.ci-card .ci-body a:hover{opacity:.8}
.ci-card .ci-list{list-style:none}
.ci-card .ci-list li{font-size:.82rem;color:var(--text-secondary);padding:6px 0;border-bottom:1px solid rgba(42,37,32,.4);display:flex;align-items:center;gap:8px}
.ci-card .ci-list li:last-child{border-bottom:none}
.ci-card .ci-list .li-ico{font-size:.9rem;flex-shrink:0}

/* OFFICE MAP */
.offices{padding:80px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.office-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.office-card{padding:32px 24px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .4s;position:relative;overflow:hidden}
.office-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:0;transition:opacity .3s}
.office-card:hover{border-color:rgba(212,168,67,.3);transform:translateY(-4px)}
.office-card:hover::before{opacity:1}
.office-card .oc-badge{
    position:absolute;top:14px;right:14px;
    padding:3px 10px;
    font-size:.6rem;font-weight:700;
    border-radius:50px;letter-spacing:.04em;
}
.office-card .oc-badge.hq{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(212,168,67,.2)}
.office-card .oc-badge.branch{background:var(--surface3);color:var(--text-muted);border:1px solid var(--border)}
.office-card .oc-city{font-size:1.6rem;font-weight:900;margin-bottom:2px;margin-top:24px}
.office-card .oc-name{font-size:.78rem;color:var(--accent);margin-bottom:16px;font-weight:500}
.office-card .oc-detail{display:flex;flex-direction:column;gap:10px}
.office-card .oc-row{display:flex;align-items:flex-start;gap:8px;font-size:.78rem;color:var(--text-muted);line-height:1.6}
.oc-row .oc-ico{flex-shrink:0;font-size:.85rem;margin-top:1px}

/* RESPONSIVE MAP VISUAL */
.map-visual{
    margin-top:40px;
    padding:40px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    position:relative;
    min-height:200px;
    display:flex;align-items:center;justify-content:center;
}
.map-visual .map-bg{position:absolute;inset:0;opacity:.05}
.map-visual svg{width:100%;max-width:700px;height:auto;position:relative;z-index:1}
.map-dot{fill:var(--accent);opacity:.8}
.map-dot-hq{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(212,168,67,.5))}
.map-line{stroke:rgba(212,168,67,.2);stroke-width:1;stroke-dasharray:4 4}
.map-label{fill:var(--text-muted);font-size:10px;font-family:'DM Mono',monospace}

/* FAQ */
.faq-section{background:var(--surface);border-top:1px solid var(--border)}
.faq-list{max-width:800px}
details{border-bottom:1px solid var(--border);padding:24px 0}
summary{font-size:1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:'DM Mono',monospace;font-size:1.2rem;color:var(--text-muted);transition:transform .3s}
details[open] summary{color:var(--accent)}
details[open] summary::after{content:'-';transform:rotate(180deg);color:var(--accent)}
details p{margin-top:14px;font-size:.88rem;color:var(--text-secondary);line-height:1.8}

/* FOOTER */
footer{padding:48px 0;border-top:1px solid var(--border)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
footer .brand{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--accent);letter-spacing:.05em}
footer .copy{font-size:.72rem;color:var(--text-muted)}

/* SUCCESS INLINE */
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success.show{display:block}
.form-success .fs-icon{width:56px;height:56px;margin:0 auto 16px;background:var(--success-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;animation:scaleIn .4s ease}
@keyframes scaleIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.form-success h3{font-size:1.3rem;font-weight:800;margin-bottom:8px}
.form-success h3 .accent{color:var(--success)}
.form-success p{font-size:.88rem;color:var(--text-secondary);line-height:1.8}

.fade-up{opacity:0;transform:translateY(30px);transition:all .7s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up:nth-child(2){transition-delay:.08s}
.fade-up:nth-child(3){transition-delay:.16s}
.fade-up:nth-child(4){transition-delay:.24s}
.fade-up:nth-child(5){transition-delay:.32s}

@media(max-width:1024px){
    .contact-grid{grid-template-columns:1fr}
    .office-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .hero h1{font-size:2rem}
    .quick-bar{grid-template-columns:1fr}
    .frow{grid-template-columns:1fr}
    .subject-grid{grid-template-columns:1fr}
    .office-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .footer-inner{flex-direction:column;gap:12px;text-align:center}
    .contact-form{padding:24px}
}