:root { --bg: #FDFBF7; --bg-2: #F5EFE2; --panel: rgba(255, 255, 255, 0.58); --panel-strong: rgba(255, 255, 255, 0.76); --text: #171717; --muted: #5e5b55; --line: rgba(23, 23, 23, 0.1); --accent: #c2410c; --accent-2: #f97316; --shadow: 0 24px 80px rgba(22, 22, 22, 0.1); --radius: 24px; --radius-lg: 32px; --max: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", "Noto Serif TC", "Songti TC", serif; color: var(--text); background: radial-gradient(circle at 15% 15%, rgba(249, 115, 22, 0.08), transparent 35%), radial-gradient(circle at 85% 30%, rgba(245, 158, 11, 0.12), transparent 30%), radial-gradient(circle at 50% 65%, rgba(234, 88, 12, 0.06), transparent 40%), linear-gradient(180deg, var(--bg), var(--bg-2)); min-height: 100vh; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.75)); opacity: 0.45; } body.intro-active, body.scroll-lock { overflow: hidden; } .intro-stage { position: fixed; inset: 0; overflow: hidden; z-index: 9999; background: var(--bg); transition: opacity 0.8s ease, visibility 0.8s ease; } .intro-stage.done { opacity: 0; visibility: hidden; pointer-events: none; } .intro-canvas { position: absolute; left: 0; top: 0; width: 2200px; height: 1600px; transform-origin: 0 0; will-change: transform; } .intro-word { position: absolute; font-size: clamp(32px, 8vw, 88px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; will-change: transform, opacity; color: var(--text); } .intro-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 13px; color: var(--text); letter-spacing: 0.15em; opacity: 0.6; line-height: 1.6; will-change: opacity; animation: pulse 2s infinite ease-in-out; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } body.intro-active .wrap { opacity: 0; transform: scale(0.92); filter: blur(12px); } .wrap { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; position: relative; z-index: 1; transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s cubic-bezier(0.16, 1, 0.3, 1); } header { padding: 24px 0 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.42); backdrop-filter: blur(18px); box-shadow: 0 14px 50px rgba(15, 15, 15, 0.06); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-text strong { font-size: 1.02rem; letter-spacing: 0.12em; text-transform: uppercase; } .brand-text span { margin-top: 6px; color: var(--muted); font-size: 0.92rem; } nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } nav a, .ghost-btn, .primary-btn, .card-link { text-decoration: none; transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; } nav a { color: var(--text); font-size: 0.94rem; padding: 10px 14px; border-radius: 999px; } nav a:hover { background: rgba(255,255,255,0.5); } main { padding: 24px 0 72px; } .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; margin-top: 18px; } .hero-copy, .hero-side, .panel, .card { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(18px); box-shadow: var(--shadow); } .hero-copy { border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 58px); position: relative; overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.66); color: var(--muted); font-size: 0.9rem; letter-spacing: 0.08em; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.92; margin: 22px 0 18px; letter-spacing: -0.05em; max-width: 12ch; text-wrap: balance; } .hero-title { display: inline-block; text-align: left; } .hero-title .line { display: block; } .lead { max-width: 60ch; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.8; color: #2c2b28; margin: 0 0 28px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .primary-btn, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-size: 0.98rem; cursor: pointer; color: inherit; } .primary-btn { background: linear-gradient(135deg, #1f1a17, var(--accent)); color: #fff; box-shadow: 0 16px 30px rgba(194, 65, 12, 0.22); } .ghost-btn { border-color: rgba(23,23,23,0.14); background: rgba(255,255,255,0.38); } .primary-btn:hover, .ghost-btn:hover, .card:hover, .mini-link:hover, .contact-btn:hover { transform: translateY(-2px); } .hero-side { border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 16px; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .stat { border-radius: 22px; padding: 18px; background: rgba(255,255,255,0.56); border: 1px solid rgba(23,23,23,0.08); } .stat strong { display: block; font-size: 1.6rem; margin-bottom: 8px; } .stat span { color: var(--muted); line-height: 1.5; font-size: 0.94rem; } .feature { border-radius: 24px; padding: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.42)); border: 1px solid rgba(23,23,23,0.08); } .feature h2, .section-title h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -0.03em; } .feature p, .section-copy p, .card p, .contact-intro, .note { color: var(--muted); line-height: 1.8; margin: 0; } .section { margin-top: 24px; padding: 6px 0; } .section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .panel { border-radius: var(--radius-lg); padding: 28px; } .section-title { margin-bottom: 18px; } .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .pill { padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.62); border: 1px solid rgba(23,23,23,0.08); color: #2d2a24; font-size: 0.92rem; } .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .card { border-radius: 26px; padding: 20px; background: rgba(255,255,255,0.55); } .card h3 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -0.02em; } .jump-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .jump-card { position: relative; overflow: hidden; min-height: 200px; border-radius: 28px; padding: 22px; border: 1px solid rgba(23,23,23,0.1); background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42)); box-shadow: var(--shadow); } .jump-card h3 { margin: 0 0 10px; font-size: 1.18rem; } .jump-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.75; } .mini-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(23,23,23,0.12); background: rgba(255,255,255,0.6); color: var(--text); } .mini-link::after { content: "↗"; } .contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .contact-btn { position: relative; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(23,23,23,0.12); background: rgba(255,255,255,0.62); color: var(--text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 48px; white-space: nowrap; text-decoration: none; user-select: none; } .contact-btn strong { display: inline; font-size: 0.98rem; margin-bottom: 0; } .contact-btn .contact-sub { color: var(--muted); font-size: 0.9rem; } .contact-btn[data-qr] .qr-pop { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%) scale(0.96); opacity: 0; pointer-events: none; width: 132px; height: 132px; border-radius: 18px; padding: 10px; background: rgba(255,255,255,0.96); border: 1px solid rgba(23,23,23,0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.12); transition: all .22s ease; display: grid; place-items: center; text-align: center; z-index: 5; } .contact-btn[data-qr]:hover .qr-pop, .contact-btn[data-qr].is-open .qr-pop { opacity: 1; transform: translateX(-50%) scale(1); } .qr-pop img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; } .qr-pop .qr-box { width: 100%; height: 100%; border-radius: 14px; border: 1px dashed rgba(23,23,23,0.22); display: grid; place-items: center; color: var(--muted); font-size: 0.88rem; line-height: 1.4; padding: 10px; } .footer { margin: 26px 0 12px; padding: 20px 0 8px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.94rem; } .inline-links { display: flex; flex-wrap: wrap; gap: 10px; } .inline-links a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(23,23,23,0.22); } .jump-tag { position: absolute; top: 18px; right: 18px; font-size: 0.84rem; color: var(--muted); padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,0.54); border: 1px solid rgba(23,23,23,0.08); } .case-box { display: grid; gap: 16px; margin-top: 12px; } .case-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .meta { border-radius: 20px; padding: 16px; background: rgba(255,255,255,0.52); border: 1px solid rgba(23,23,23,0.08); } .meta strong { display: block; margin-bottom: 8px; } .meta span { color: var(--muted); font-size: 0.94rem; line-height: 1.7; } @media (max-width: 980px) { .hero, .section-grid, .contact-grid, .jump-grid, .cards, .case-meta { grid-template-columns: 1fr; } .topbar { border-radius: 28px; flex-direction: column; align-items: flex-start; } nav { justify-content: flex-start; } .contact-buttons { gap: 10px; } .contact-btn { border-radius: 18px; white-space: normal; width: 100%; justify-content: space-between; } .contact-btn[data-qr] .qr-pop { position: static; transform: none; opacity: 0; width: 0; height: 0; margin-top: 0; pointer-events: none; left: auto; top: auto; padding: 0; border: 0; box-shadow: none; overflow: hidden; } .contact-btn[data-qr].is-open .qr-pop { opacity: 1; width: 96px; height: 96px; margin-top: 10px; padding: 10px; border: 1px solid rgba(23,23,23,0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } } .contact-canvas { height: 20px; display: inline-block; vertical-align: middle; margin-left: 8px; } .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1f1a17; color: #fff; padding: 12px 28px; border-radius: 999px; font-size: 0.94rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); z-index: 99999; opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.1); letter-spacing: 0.05em; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }