:root { --bg:#f4f7fb; --surface:#ffffff; --surface-soft:#eef3fb; --ink:#17263f; --muted:#61708a; --line:rgba(23,38,63,0.10); --accent:#2563d9; --accent-soft:#8ab3f8; --hero-a:#112742; --hero-b:#244676; --white:#f5f8ff; --shadow:0 28px 80px rgba(18,34,62,0.10); --max:1220px; --radius-xl:34px; --radius-lg:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:linear-gradient(180deg,var(--bg) 0%, #fbfcff 52%, var(--bg) 100%); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.fohub-shell { overflow-x:hidden; }
.fohub-wrap { width:min(calc(100% - 40px), var(--max)); margin:0 auto; }
.fohub-header { position:fixed; top:0; left:0; right:0; z-index:30; background:rgba(16,28,49,.20); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.08); }
.fohub-header-inner { min-height:84px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.fohub-brand { display:inline-flex; align-items:center; gap:14px; color:var(--white); min-width:0; }
.fohub-brand-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:12px; font-weight:800; letter-spacing:.08em; }
.fohub-brand-copy { display:grid; gap:4px; min-width:0; }
.fohub-brand-name { font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fohub-brand-meta { font-size:11px; color:rgba(245,248,255,.72); letter-spacing:.18em; text-transform:uppercase; }
.fohub-nav { display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; color:rgba(245,248,255,.84); font-size:14px; }
.fohub-nav a { position:relative; padding:5px 0; }
.fohub-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:rgba(245,248,255,.76); transform:scaleX(0); transform-origin:center; transition:transform .28s ease; }
.fohub-nav a:hover::after,.fohub-nav a:focus-visible::after { transform:scaleX(1); }
.fohub-cta { display:inline-flex; align-items:center; justify-content:center; min-width:118px; min-height:42px; padding:0 18px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--accent), color-mix(in srgb,var(--accent) 72%, #fff)); box-shadow:0 14px 30px rgba(37,99,217,.24); font-size:14px; font-weight:700; }
.fohub-hero { position:relative; min-height:100svh; overflow:hidden; color:var(--white); }
.fohub-hero-media { position:absolute; inset:0; z-index:-3; }
.fohub-hero-media img { width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.fohub-hero-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(10,20,37,.16) 0%, rgba(10,20,37,.46) 34%, rgba(10,20,37,.80) 100%), linear-gradient(90deg, rgba(10,20,37,.76) 0%, rgba(10,20,37,.24) 56%, rgba(10,20,37,.62) 100%); }
.fohub-hero-grid { min-height:100svh; display:grid; grid-template-columns:1.02fr .98fr; gap:34px; align-items:center; padding:154px 0 92px; }
.fohub-kicker { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:rgba(245,248,255,.84); font-size:13px; letter-spacing:.08em; }
.fohub-hero-copy h1 { max-width:620px; margin:20px 0 18px; font-size:clamp(38px,5.8vw,74px); line-height:1.04; letter-spacing:-.05em; }
.fohub-hero-copy p, .fohub-section-head p, .fohub-business-card p, .fohub-scene-card p, .fohub-capability-cards p, .fohub-process-grid p, .fohub-cooperation-copy p, .fohub-about-main p, .fohub-about-side p, .fohub-contact-copy p { margin:0; color:var(--muted); line-height:1.9; font-size:16px; }
.fohub-hero-copy p { max-width:540px; color:rgba(245,248,255,.84); font-size:18px; }
.fohub-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.fohub-btn { display:inline-flex; align-items:center; justify-content:center; min-width:146px; min-height:50px; padding:0 22px; border-radius:999px; font-weight:700; }
.fohub-btn-primary { color:#fff; background:linear-gradient(135deg,var(--accent), color-mix(in srgb,var(--accent) 72%, #fff)); box-shadow:0 18px 34px rgba(37,99,217,.24); }
.fohub-btn-ghost { color:var(--white); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); }
.fohub-hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fohub-hero-tags span { padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(245,248,255,.80); font-size:13px; }
.fohub-hero-panel { padding:30px; border-radius:30px; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 80px rgba(8,22,41,.22); backdrop-filter:blur(18px); }
.fohub-hero-panel-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; color:rgba(245,248,255,.88); }
.fohub-hero-panel-top strong { font-size:20px; }
.fohub-hero-panel-top span { font-size:13px; color:rgba(245,248,255,.62); }
.fohub-hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fohub-hero-metrics article { padding:18px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.fohub-hero-metrics strong { display:block; margin-bottom:10px; font-size:22px; color:var(--white); }
.fohub-hero-metrics span { color:rgba(245,248,255,.78); line-height:1.8; font-size:15px; }
.fohub-section { padding:92px 0; }
.fohub-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.fohub-section-head span { color:var(--accent); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.fohub-section-head h2, .fohub-contact-copy h2 { margin:8px 0 0; font-size:clamp(30px,3vw,44px); line-height:1.12; letter-spacing:-.03em; }
.fohub-section-head-wide p { max-width:520px; }
.fohub-position-grid, .fohub-cooperation-grid, .fohub-about-grid { display:grid; grid-template-columns:.94fr 1.06fr; gap:28px; align-items:start; }
.fohub-position-copy, .fohub-cooperation-copy { display:grid; gap:18px; }
.fohub-business-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.fohub-business-card, .fohub-scene-card, .fohub-about-main, .fohub-about-side, .fohub-capability-cards article, .fohub-process-grid article { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:0 28px 80px rgba(18,34,62,.10); }
.fohub-business-card { padding:26px; }
.fohub-business-lead { background:linear-gradient(180deg,var(--surface-soft),#ffffff); }
.fohub-business-card h3, .fohub-scene-card h3, .fohub-process-grid h3 { margin:0 0 12px; font-size:20px; line-height:1.28; }
.fohub-business-card strong { display:block; margin-bottom:10px; font-size:18px; }
.fohub-scene-grid { display:grid; grid-template-columns:1.18fr .82fr .82fr; gap:20px; }
.fohub-scene-card { overflow:hidden; }
.fohub-scene-card img { width:100%; aspect-ratio:16/11; object-fit:cover; filter:saturate(1.05) contrast(1.04); }
.fohub-scene-card div { padding:18px 18px 20px; }
.fohub-scene-card-slot { display:grid; grid-template-rows:220px auto; }
.fohub-scene-slot { position:relative; background:linear-gradient(135deg,#112742, #244676); }
.fohub-scene-slot::before { content:""; position:absolute; inset:18px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00)); }
.fohub-scene-slot::after { content:""; position:absolute; inset:auto 26px 26px 26px; height:90px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.10)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.fohub-capability-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start; }
.fohub-capability-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.fohub-capability-cards article { padding:22px; }
.fohub-capability-cards strong, .fohub-process-grid strong { display:block; margin-bottom:10px; font-size:16px; }
.fohub-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fohub-process-grid article { padding:24px; }
.fohub-process-grid strong { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:16px; border-radius:50%; background:var(--accent); color:#fff; font-size:14px; }
.fohub-cooperation-copy ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.9; }
.fohub-about-main { padding:30px; }
.fohub-about-side { overflow:hidden; background:linear-gradient(135deg, #112742, #244676); color:var(--white); }
.fohub-about-visual { min-height:220px; background-image:url('images/fohub-glow.svg'); background-size:cover; background-position:center; }
.fohub-about-side div { padding:20px 22px 24px; }
.fohub-about-side strong { display:block; margin-bottom:12px; font-size:18px; }
.fohub-about-side p { color:rgba(245,248,255,.78); }
.fohub-contact-band { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:38px; border-radius:32px; background:linear-gradient(135deg,#112742,#244676); color:var(--white); box-shadow:0 24px 72px rgba(18,34,62,.18); }
.fohub-contact-copy span { display:inline-flex; color:rgba(245,248,255,.78); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.fohub-contact-copy p { color:rgba(245,248,255,.84); }
.fohub-contact-pills { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.fohub-contact-pills span { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(245,248,255,.86); font-size:14px; }
.fohub-footer { padding:28px 0 46px; color:var(--muted); font-size:13px; }
.fohub-footer-inner { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; }
.fohub-footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.fohub-filing-group { align-items:center; gap:18px; flex-wrap:wrap; }
.fohub-filing-group a { color:var(--muted); transition:color .24s ease; }
.fohub-filing-group a:hover, .fohub-filing-group a:focus-visible { color:var(--accent); }
.fohub-filing-police { display:inline-flex; align-items:center; gap:8px; }
.fohub-filing-police-icon { width:18px; height:18px; object-fit:contain; flex:0 0 18px; }
@media (max-width:1120px) { .fohub-header-inner, .fohub-hero-grid, .fohub-position-grid, .fohub-capability-grid, .fohub-cooperation-grid, .fohub-about-grid, .fohub-contact-band { grid-template-columns:1fr; } .fohub-business-grid, .fohub-scene-grid, .fohub-capability-cards, .fohub-process-grid { grid-template-columns:repeat(2,1fr); } .fohub-nav { justify-content:flex-start; } .fohub-cta { justify-self:start; } .fohub-contact-pills { justify-content:flex-start; } }
@media (max-width:760px) { .fohub-header { position:absolute; } .fohub-header-inner { padding:18px 0; } .fohub-hero-grid { padding:152px 0 76px; } .fohub-hero-copy h1 { font-size:clamp(36px,10vw,56px); } .fohub-business-grid, .fohub-scene-grid, .fohub-capability-cards, .fohub-process-grid { grid-template-columns:1fr; } .fohub-section { padding:74px 0; } .fohub-section-head { flex-direction:column; align-items:flex-start; } .fohub-footer-meta { align-items:flex-start; } .fohub-filing-group { gap:10px 16px; } }