Add first business article and article layout

src/styles/global.css

@@ -0,0 +1,203 @@
+:root {
+  --bg: #f7f8fa;
+  --text: #172033;
+  --muted: #5f6b7a;
+  --panel: #ffffff;
+  --accent: #1d4f91;
+  --accent-dark: #12345f;
+  --border: #d9dee7;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+a { color: var(--accent); text-decoration: none; }
+
+.site-shell {
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.site-header {
+  background: #fff;
+  border-bottom: 1px solid var(--border);
+  padding: 20px 0;
+}
+
+.site-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.brand {
+  font-weight: 700;
+  color: var(--text);
+}
+
+.nav-links {
+  display: flex;
+  gap: 24px;
+}
+
+.hero {
+  padding: 88px 0;
+  background: linear-gradient(135deg, #10233f, #1d4f91);
+  color: white;
+}
+
+.hero h1 {
+  font-size: clamp(2.8rem, 6vw, 5.2rem);
+  line-height: 1;
+  max-width: 850px;
+}
+
+.hero p {
+  font-size: 1.25rem;
+  max-width: 720px;
+  color: #dbe6f5;
+}
+
+.button {
+  display: inline-block;
+  margin-top: 24px;
+  padding: 12px 20px;
+  background: white;
+  color: var(--accent-dark);
+  border-radius: 6px;
+  font-weight: 700;
+}
+
+.section {
+  padding: 64px 0;
+}
+
+.section h2 {
+  font-size: 2.2rem;
+  margin-bottom: 12px;
+}
+
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 32px;
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 26px;
+}
+
+.card h3 {
+  margin-top: 0;
+}
+
+.contact-box {
+  max-width: 720px;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 32px;
+}
+
+.form-grid {
+  display: grid;
+  gap: 16px;
+}
+
+input, textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font: inherit;
+}
+
+textarea {
+  min-height: 160px;
+}
+
+button {
+  width: fit-content;
+  padding: 12px 20px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--accent);
+  color: white;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.site-footer {
+  border-top: 1px solid var(--border);
+  padding: 32px 0;
+  color: var(--muted);
+}
+
+@media (max-width: 800px) {
+  .service-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .site-nav {
+    align-items: flex-start;
+    gap: 12px;
+    flex-direction: column;
+  }
+}
+
+.article-hero {
+  padding: 56px 0 24px;
+  background: #ffffff;
+  border-bottom: 1px solid var(--border);
+}
+
+.article-hero h1 {
+  font-size: clamp(2.4rem, 5vw, 4.2rem);
+  line-height: 1.05;
+  max-width: 900px;
+}
+
+.article-meta {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.article-excerpt {
+  max-width: 760px;
+  font-size: 1.2rem;
+  color: var(--muted);
+}
+
+.article-banner {
+  width: 100%;
+  max-height: 420px;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  margin-top: 32px;
+}
+
+.article-content {
+  max-width: 820px;
+  padding: 56px 0;
+}
+
+.article-content h2 {
+  margin-top: 42px;
+}
+
+.article-content p,
+.article-content li {
+  font-size: 1.08rem;
+}