@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@500;600;700&display=swap');

:root { --ink:#0f172a; --muted:#526174; --blue:#1a3b90; --bright-blue:#2354dc; --mint:#a9f5d8; --paper:#f5f7f5; --line:#d7dedb; --white:#fff; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif; color:var(--ink); background:#fff; line-height:1.75; overflow-x:hidden; font-size:16px; font-weight:400; }
.container { max-width:1280px; margin:0 auto; padding:0 32px; }

/* Main-site header: keep structure, sizing, and destinations unchanged. */
.site-header { position:fixed; top:0; left:0; right:0; height:80px; background:rgba(255,255,255,.95); backdrop-filter:blur(16px); z-index:1000; }
.nav-container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.header-left { display:flex; align-items:center; gap:10px; }
.logo-link { display:flex; align-items:center; text-decoration:none; }
.logo-full { height:48px; width:auto; }
.header-slogan-text { display:flex; flex-direction:column; gap:1px; line-height:1.1; user-select:none; }
.header-slogan-text span { color:#1a3b90; font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif; }
.header-slogan-text span:first-child { font-size:14px; font-weight:700; letter-spacing:.06em; }
.header-slogan-text span:last-child { font-size:11px; font-weight:600; letter-spacing:.03em; color:#31559a; }
.nav-list { display:flex; list-style:none; gap:48px; align-items:center; }
.nav-link,.nav-product-btn { display:inline-block; padding:8px 20px; border-radius:8px; color:#0f172a; text-decoration:none; font-size:16px; font-weight:600; transition:.2s ease; }
.nav-link:hover { background:rgba(26,59,144,.08); color:#1a3b90; }
.dropdown { position:relative; }
.nav-product-btn { background:#fff; border:1px solid transparent; }
.nav-product-btn:hover { background:#1a3b90; color:#fff; border-color:#1a3b90; }
.dropdown-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:#1a3b90; border-radius:8px; padding:10px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.25s ease; z-index:999; display:flex; flex-direction:column; gap:8px; }
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-item { display:block; text-align:center; padding:10px 16px; border-radius:6px; color:#fff; font-size:15px; font-weight:500; text-decoration:none; transition:background .2s ease; }
.dropdown-item:hover { background:rgba(255,255,255,.15); }

/* Hero */
.hero { width:100%; height:calc(100vh - 80px); min-height:620px; margin-top:80px; position:relative; display:flex; align-items:center; overflow:hidden; color:#fff; }
.hero-bg { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(7,20,48,.76),rgba(10,27,62,.2)),url('../images/hero-bg.jpg'); background-size:cover; background-position:center; filter:saturate(.88); }
.hero-content { position:relative; z-index:1; width:100%; }
.hero h1 { font-size:clamp(58px,6vw,88px); line-height:1.08; font-weight:800; letter-spacing:0; max-width:940px; }
.hero h1 span { display:block; }
.text-highlight { color:#8db8ff; font-size:1em; font-weight:800; text-shadow:0 0 26px rgba(141,184,255,.18); }
.hero-lead { max-width:980px; margin:30px 0; color:rgba(255,255,255,.96); font-size:22px; line-height:1.75; font-weight:600; }
.hero-lead span { display:block; }
.hero-lead strong { font-weight:700; color:#fff; }
.button { display:inline-flex; align-items:center; gap:22px; padding:13px 19px; border-radius:6px; text-decoration:none; font-size:15px; font-weight:700; transition:.22s ease; }
.button-light { background:#fff; color:var(--ink); }
.button-light:hover { background:var(--mint); transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.2); }

/* Shared headings */
.eyebrow { font:500 12px "DM Mono",monospace; color:var(--bright-blue); margin-bottom:16px; }
.eyebrow.light { color:var(--mint); }
.section-heading h2 { font-size:clamp(38px,4vw,58px); line-height:1.12; letter-spacing:0; }
.section-heading h2 em { color:var(--bright-blue); font-style:normal; }
.section-heading.compact { max-width:none; margin-bottom:42px; padding-bottom:34px; border-bottom:1px solid #cfd9e6; }

/* Identity and working principles share one viewport. */
.culture-section { min-height:calc(100vh - 80px); padding:96px 0; background:#fff; display:flex; align-items:center; border-top:1px solid var(--line); }
.culture-intro { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:end; margin-bottom:44px; }
.culture-copy { color:#26384d; font-size:19px; line-height:1.9; font-weight:600; max-width:680px; }
.culture-copy span { display:block; }
.culture-grid { display:grid; grid-template-columns:1.35fr repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); box-shadow:0 16px 46px rgba(15,23,42,.05); }
.culture-card { min-height:238px; padding:24px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:#f8faf9; transition:transform .24s ease,background .24s ease,box-shadow .24s ease,color .24s ease; }
.culture-card>span { font:500 13px "DM Mono",monospace; color:var(--bright-blue); }
.culture-card h3 { font-size:22px; font-weight:800; margin-bottom:12px; }
.culture-card p { color:#334155; font-size:17px; line-height:1.75; font-weight:500; }
.culture-card:hover { transform:translateY(-10px); background:#fff; box-shadow:0 18px 36px rgba(15,23,42,.12); position:relative; z-index:2; }
.culture-card.featured { background:var(--bright-blue); color:#fff; }
.culture-card.featured>span { color:var(--mint); font-size:76px; font-weight:700; line-height:1; }
.culture-card.featured p { color:rgba(255,255,255,.86); }
.culture-card.featured:hover { background:var(--blue); }

/* Roles and application */
.recruitment-section { position:relative; padding:94px 0 104px; background:#f3f6fa; }
.recruitment-section::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:#8db8ff; }
.roles-workspace { display:grid; grid-template-columns:310px 1fr; gap:48px; align-items:start; }
.role-tabs { display:flex; flex-direction:column; border-top:2px solid var(--ink); }
.role-tab { width:100%; font:inherit; text-align:left; border:0; border-bottom:1px solid var(--line); background:#fff; padding:20px 12px 20px 4px; display:grid; grid-template-columns:36px 1fr 22px; column-gap:8px; cursor:pointer; color:#607084; transition:.2s ease; }
.role-tab span { font:500 12px "DM Mono",monospace; }
.role-tab strong { font-size:19px; line-height:1.35; color:var(--ink); font-weight:800; }
.role-tab small { grid-column:2; font-size:14px; margin-top:4px; font-weight:500; }
.role-tab i { grid-column:3; grid-row:1 / span 2; align-self:center; font-style:normal; opacity:0; font-size:20px; }
.role-tab:hover,.role-tab.active { background:#f1f5ff; padding-left:14px; }
.role-tab:hover strong,.role-tab.active strong { color:var(--bright-blue); }
.role-tab:hover i,.role-tab.active i { opacity:1; color:var(--bright-blue); }
.role-detail { border:1px solid #cbd6e2; padding:44px 48px; min-height:610px; background:#fff; box-shadow:0 18px 48px rgba(23,53,92,.08); }
.role-detail-head .eyebrow { margin-bottom:15px; font-size:13px; }
.role-detail-head h3 { font-size:38px; line-height:1.35; font-weight:800; max-width:750px; margin-bottom:24px; }
.tag-row { display:flex; flex-wrap:wrap; gap:9px; }
.tag-row span { font:500 13px "DM Mono",monospace; color:var(--bright-blue); border:1px solid #9eb4f1; padding:7px 10px; border-radius:4px; background:#f8faff; }
.role-columns { display:grid; grid-template-columns:1fr 1fr; gap:52px; border-top:1px solid var(--line); margin-top:34px; padding-top:28px; }
.role-columns h4 { font-size:17px; font-weight:800; margin-bottom:16px; color:var(--ink); }
.role-columns ul { list-style:none; }
.role-columns li { position:relative; padding-left:20px; color:#1f3045; font-size:18px; font-weight:600; line-height:1.75; margin-bottom:12px; }
.role-columns li::before { content:'+'; position:absolute; left:0; color:var(--bright-blue); font-weight:800; }
.bonus-title { margin-top:28px; }
.muted { color:#405168; font-size:17px; font-weight:600; }
.role-note { margin-top:30px; padding:13px 18px; border-left:4px solid var(--mint); background:#effaf5; color:#102e57; font-size:17px; font-weight:700; }
.apply-strip { margin-top:42px; padding:38px 46px; background:#0d2454; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; border-radius:6px; box-shadow:0 18px 46px rgba(13,36,84,.18); }
.apply-strip h2 { font-size:36px; line-height:1.25; margin-bottom:12px; }
.apply-strip p { color:rgba(255,255,255,.78); font-size:16px; }
.apply-actions { display:flex; flex-direction:column; gap:10px; }
.apply-actions p,.apply-actions a { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:16px; }
.apply-actions p span { color:rgba(255,255,255,.58); }
.apply-actions p strong { color:#fff; }
.apply-actions a { color:var(--mint); text-decoration:none; font-weight:700; transition:.2s ease; }
.apply-actions a:hover { color:#fff; padding-left:8px; }

/* Main-site footer: keep its original visual structure. */
.site-footer { background:#0b1a3d; color:rgba(255,255,255,.85); padding:60px 0 0; }
.footer-container { display:grid; grid-template-columns:2fr 1fr; gap:60px; padding-bottom:40px; }
.footer-logo { height:42px; margin-bottom:16px; filter:brightness(0) invert(1); }
.footer-slogan { display:flex; flex-direction:column; line-height:1.6; margin-bottom:12px; }
.footer-slogan span { color:#fff; }
.footer-slogan span:first-child { font-size:16px; font-weight:500; }
.footer-slogan span:last-child { font-size:14px; opacity:.9; }
.footer-links h4 { color:#fff; font-size:17px; font-weight:600; margin-bottom:20px; }
.footer-links a { display:block; color:rgba(255,255,255,.75); text-decoration:none; margin-bottom:12px; font-size:15px; transition:color .3s ease; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:20px 0; text-align:center; font-size:14px; opacity:.65; }
:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }

@media (max-width:900px) {
    .culture-intro { grid-template-columns:1fr; gap:22px; }
    .culture-grid { grid-template-columns:repeat(2,1fr); }
    .culture-card.featured { grid-column:span 2; }
    .roles-workspace { grid-template-columns:1fr; gap:28px; }
    .role-tabs { flex-direction:row; overflow-x:auto; scrollbar-width:none; }
    .role-tabs::-webkit-scrollbar { display:none; }
    .role-tab { min-width:180px; }
    .apply-strip { gap:40px; }
}

@media (max-width:768px) {
    .header-slogan-text { gap:0; }
    .header-slogan-text span:first-child { font-size:11px; }
    .header-slogan-text span:last-child { font-size:9px; }
    .nav-list { gap:24px; }
    .nav-product-btn { font-size:14px; padding:6px 14px; }
    .hero { min-height:580px; height:calc(100svh - 80px); }
    .hero h1 { font-size:40px; line-height:1.14; }
    .hero-lead { max-width:100%; font-size:18px; line-height:1.7; overflow-wrap:anywhere; word-break:break-all; }
    .culture-section { min-height:0; padding:70px 0; }
    .culture-grid { grid-template-columns:1fr; }
    .culture-card.featured { grid-column:auto; }
    .culture-card { min-height:180px; }
    .recruitment-section { padding:76px 0; }
    .section-heading.compact { margin-bottom:36px; }
    .role-tab { min-width:165px; padding-right:10px; }
    .role-detail { padding:28px 22px; min-height:0; }
    .role-detail-head h3 { font-size:30px; }
    .role-columns { grid-template-columns:1fr; gap:22px; }
    .role-columns li { font-size:17px; }
    .apply-strip { grid-template-columns:1fr; gap:28px; padding:32px 24px; }
    .apply-actions p,.apply-actions a { font-size:14px; }
    .footer-container { grid-template-columns:1fr; gap:40px; }
}

@media (max-width:370px) {
    .hero h1 { font-size:36px; }
}

@media (max-width:480px) {
    .header-slogan-text { display:none; }
}