:root{--ink:#101216;--bg:#f8f9fb;--card:#ffffff;--line:#e6e9ef;--accent:#1a73e8;--accent-2:#00c853;--smoke:0 10px 30px rgba(0,0,0,.06);--radius:16px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.75;}
a{color:var(--accent);text-decoration:none} a:hover{opacity:.9}
.container{width:min(1200px,92vw); margin:0 auto; padding:clamp(18px,2vw,28px)}
header.nav{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.7); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.04em}
.brand .logo{width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2));}
nav a{padding:10px 12px; border-radius:10px; color:#263238; font-weight:700}
nav a.active{background:linear-gradient(180deg,#fff,#f7f9fd); border:1px solid var(--line)}
.ham{display:none}
@media (max-width:860px){nav{display:none; position:fixed; top:64px; right:12px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--smoke); padding:8px} nav.open{display:block} .ham{display:inline-flex; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff}}
.hero{position:relative; min-height:90svh; display:grid; place-items:center; padding-top:80px; overflow:hidden; background:#0b0d10; color:#fff}
.hero::after{content:''; position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.08), transparent), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); pointer-events:none}
#grid{position:absolute; inset:0; opacity:.6}
.hero-inner{position:relative; z-index:1; text-align:center; padding:0 10px}
.kicker{letter-spacing:.28em; font-size:.86rem; color:#cfd8dc; text-transform:uppercase}
h1{font-size:clamp(34px,6.6vw,72px); line-height:1.08; margin:12px 0 12px; font-weight:900; letter-spacing:.02em; background:linear-gradient(180deg,#e3edf9,#cfe3ff,#a1c2ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(15px,2.2vw,19px); color:#e5eef7; max-width:980px; margin:0 auto 22px}
.cta{display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center}
.btn{padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-weight:800; box-shadow:var(--smoke)}
.btn.primary{background:linear-gradient(180deg,#fff,#f5f7fb); color:#0b0d10; border-color:#dde3ea}
section{padding:80px 0} section.alt{background:linear-gradient(180deg,#ffffff,#f8f9fb)}
.section-title{font-size:clamp(26px,4.4vw,42px); margin:0 0 10px}
.section-desc{color:#60707b; margin:0 0 26px}
.grid{display:grid; gap:22px; grid-template-columns:repeat(12,1fr)}
.feature{grid-column:span 6; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--smoke)}
.feature h3{margin:0 0 10px}
.card{grid-column:span 4; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--smoke)}
.card h3{margin:0 0 8px}
@media (max-width:920px){ .feature{grid-column:span 12} .card{grid-column:span 6} }
@media (max-width:640px){ .card{grid-column:span 12} }
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.gallery figure{grid-column:span 6; margin:0; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:860px){ .gallery figure{grid-column:span 12} }
blockquote{margin:0; padding:16px 18px; background:#0b0d10; color:#e8f0fe; border-left:4px solid var(--accent); border-radius:12px}
footer{background:#fff; border-top:1px solid var(--line)}
.footgrid{display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr}
.copy{color:#66737f; font-size:.92rem}
@media (max-width:860px){ .footgrid{grid-template-columns:1fr} }
.reveal{opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}