/* --- Base / Reset --- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.6; color:var(--text); background:var(--bg)}
img{max-width:100%; display:block}
a{color:inherit}

/* --- Theme tokens --- */
:root{
--bg: #ffffff;
--surface: #ffffff;
--muted: #6b7280;      /* slate-500 */
--text: #0f172a;        /* slate-900 */
--ring: #e2e8f0;        /* slate-200 */
--primary: #0ea5e9;     /* sky-500 */
--primary-weak: #e0f2fe;/* sky-100 */
--shadow: 0 10px 25px rgba(2,6,23,.08);
--radius: 18px;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0b1220; --surface:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --ring:#1f2937; --primary:#38bdf8; --primary-weak:#0b2a3a; --shadow: 0 10px 25px rgba(0,0,0,.35);
}
}
html{scroll-behavior:smooth}

/* --- Layout helpers --- */
.container{max-width:1120px; margin-inline:auto; padding:0 20px}
.section{padding:72px 0}
.grid{display:grid; gap:28px}
.grid-2{grid-template-columns: 1fr}
@media(min-width: 900px){.grid-2{grid-template-columns: 1.05fr .95fr}}

/* --- Components --- */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:color-mix(in oklab, var(--surface) 78%, transparent); border-bottom:1px solid var(--ring)}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{font-weight:800; letter-spacing:.2px; font-size:20px}
.nav a{margin:0 12px; font-size:14px; color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}

.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ring); padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600}
.btn.primary{background:var(--primary); color:white; border-color:transparent}
.btn:hover{opacity:.92}

.hero{position:relative; overflow:hidden}
.blob1,.blob2{position:absolute; border-radius:999px; filter:blur(40px); opacity:.35; pointer-events:none}
.blob1{width:380px;height:380px; right:-120px; top:-80px; background:var(--primary-weak)}
.blob2{width:420px;height:420px; left:-140px; bottom:-140px; background:color-mix(in oklab, var(--primary) 30%, transparent)}

h1{font-size:clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 10px; font-weight:900}
h2{font-size:clamp(22px, 3vw, 32px); line-height:1.25; margin:0 0 10px; font-weight:800}
p.lead{font-size:18px; color:var(--muted)}

.card{background:var(--surface); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .card-body{padding:22px}
.pill{display:inline-block; background:var(--primary-weak); color:var(--primary); font-weight:700; padding:6px 10px; border-radius:999px; font-size:12px}

.list{list-style:none; padding:0; margin:14px 0 0}
.list li{display:flex; align-items:flex-start; gap:10px; color:var(--text)}
.list .icon{margin-top:2px}

.muted{color:var(--muted)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:color-mix(in oklab, var(--surface) 85%, black 5%); border:1px solid var(--ring); padding:2px 6px; border-radius:6px}

.footer{border-top:1px solid var(--ring); padding:28px 0; font-size:14px}

.aspect-video{position:relative; width:100%; padding-bottom:56%}
.aspect-video > div{position:absolute; inset:0; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, color-mix(in oklab, var(--surface) 88%, black 6%), color-mix(in oklab, var(--surface) 92%, white 4%)); border:1px dashed var(--ring); color:var(--muted)}

.contact-grid{display:grid; gap:20px}
@media(min-width:900px){.contact-grid{grid-template-columns: 1.1fr .9fr}}
.input{width:100%; padding:10px 12px; border:1px solid var(--ring); background:var(--surface); color:var(--text); border-radius:12px}
textarea.input{height:120px; resize:vertical}