:root { color-scheme:dark; --paper:#0b1020; --ink:#f8fafc; --muted:#aab1c0; --line:#353c4c; --accent:#00e5ed; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:linear-gradient(145deg,#101728 0%,#070c1b 100%); color:var(--ink); font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:6px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.accent { color:var(--accent); }
.skip-link { position:absolute; top:-100px; left:20px; z-index:2; background:var(--paper); padding:14px; }
.skip-link:focus { top:12px; }
.page { max-width:1280px; padding:0 64px; margin:auto; }
.header { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #252d3e; }
.brand { font-size:24px; font-weight:900; text-decoration:none; letter-spacing:-.045em; }
.header-note { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; }
.hero { padding:80px 0 84px; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:52px; }
.status { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; margin:0 0 38px; border:1px solid #008f9d; color:#d9fcff; background:#073d4a; border-radius:30px; font-size:12px; font-weight:700; }
.status span { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.eyebrow { color:var(--accent); font-family:Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:.16em; margin:0 0 18px; }
h1 { font-size:clamp(28px,3.05vw,42px); line-height:1.65; letter-spacing:-.045em; margin:0 0 23px; font-weight:900; }
.intro { font-size:16px; line-height:2.15; margin:0 0 32px; color:var(--muted); }
.text-link { display:inline-flex; align-items:center; gap:30px; font-size:13px; font-weight:700; padding:13px 22px; border:1px solid #008f9d; border-radius:40px; background:#073d4a; text-decoration:none; }
.text-link:hover { background:#095361; }.text-link span { color:var(--accent); font-size:20px; }
.service-card { padding:32px; border:1px solid #444b5a; border-radius:32px; background:linear-gradient(135deg,#252b3b,#1b202e); box-shadow:0 14px 0 -6px #080d1c,0 20px 40px #00000025; }
.card-top { display:flex; align-items:center; gap:14px; margin-bottom:48px; }
.grid-icon { display:grid; grid-template-columns:repeat(2,9px); gap:3px; width:21px; height:25px; }
.grid-icon i { background:var(--accent); }.grid-icon i:nth-child(2) { height:8px; }.grid-icon i:nth-child(4) { margin-top:-3px; }
.card-label { color:var(--muted); font-family:Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; }
.card-brand { margin:0 0 22px; font-size:clamp(25px,2.65vw,36px); letter-spacing:-.065em; font-weight:900; }
.card-description { margin:0 0 36px; color:#c5cad5; font-size:14px; line-height:2.1; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:24px; border-top:1px solid var(--line); }
.card-status { margin:0; padding:8px 12px; font-size:11px; }.card-note { color:var(--muted); font-size:10px; }
.about { border:1px solid var(--line); border-radius:28px; padding:40px; margin-bottom:60px; background:#171d2d; display:grid; grid-template-columns:1fr 1.4fr; gap:48px; }
h2 { font-size:27px; line-height:1.65; letter-spacing:.02em; margin:0; font-weight:800; }
.about-copy { padding-top:24px; font-size:15px; line-height:2.1; }.about-copy p { margin:0 0 18px; }
.about-copy .development { color:var(--muted); font-size:13px; margin-bottom:0; }
.footer { padding:24px 0 30px; border-top:1px solid #253043; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; }
@media (max-width:900px) { .page { padding:0 32px; }.hero { gap:30px; }.service-card { padding:26px; }.card-brand { font-size:26px; }.card-note { display:none; }.about { gap:32px; padding:32px; } }
@media (max-width:760px) {
.page { padding:0 24px; }.header { min-height:86px; }.brand { font-size:22px; }.header-note { font-size:10px; letter-spacing:0; }
.hero { grid-template-columns:1fr; gap:40px; padding:40px 0 40px; }.status { margin-bottom:28px; } h1 { font-size:clamp(25px,6.5vw,40px); line-height:1.7; }
.intro { font-size:15px; margin-bottom:24px; }.service-card { max-width:500px; width:100%; margin:auto; padding:26px; border-radius:26px; }
.card-top { margin-bottom:36px; }.card-brand { font-size:30px; }.card-description { font-size:13px; }.card-status { margin:0; }.card-note { display:inline; }
.about { grid-template-columns:1fr; gap:20px; padding:26px; margin-bottom:40px; border-radius:26px; } h2 { font-size:25px; }.about-copy { padding:0; }
}
@media (max-width:360px) { .page { padding:0 18px; }.header-note { display:none; }.desktop-break { display:none; }.service-card,.about { padding:22px; }.card-brand { font-size:27px; }.card-note { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }