:root{
	--bg:#0c0d10;
	--card:#13151a;
	--text:#e6e8ee;
	--muted:#a5adbb;
	--line:#06c755;
	--line-dk:#05a946;
	--accent:#4fb3ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Inter","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.65}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;backdrop-filter:saturate(120%) blur(8px);background:linear-gradient(180deg,rgba(19,21,26,.9),rgba(19,21,26,.6) 60%,rgba(19,21,26,0));border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{font-weight:700;letter-spacing:.2px}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.nav a:hover,.nav .cta-link{color:#fff}

.hero{
padding:72px 0 32px;
background:
    linear-gradient(180deg,rgba(12,13,16,.55),rgba(12,13,16,.7)),
    radial-gradient(1200px 400px at 10% -10%,rgba(79,179,255,.15),transparent 60%),
    radial-gradient(1200px 400px at 90% -10%,rgba(6,199,85,.12),transparent 60%),
    url("./assets/banner.jpg");
background-size:auto,auto,auto,cover;
background-position:center,10% -10%,90% -10%,center;
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;grid-template-areas:"copy art"}
.hero-copy{grid-area:copy}
.hero-copy h1{font-size:40px;line-height:1.2;margin:0 0 12px}
.subtitle{color:var(--muted);font-size:18px;margin:0 0 16px}
.trust{display:flex;gap:12px;list-style:none;padding:0;margin:0 0 18px}
.trust li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;font-size:13px;color:#cfd5e3}
.hero-cta .note{font-size:12px;color:#aab2c0;margin-top:10px}
.hero-art{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.hero-art{grid-area:art}
.hero-art .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px;font-weight:600;color:#dbe3f4}
.hero-art{place-items:center}
.hero-art .avatar{width:100%;max-width:520px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:0 12px 40px rgba(0,0,0,.45)}

.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.section h2{margin:0 0 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px}
.feature .icon{font-size:22px;margin-bottom:6px}

.steps{counter-reset:step;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.steps li{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.steps li span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#223026;color:#bdeecf;margin-right:8px;font-size:12px}

.line-section{background:linear-gradient(180deg,rgba(6,199,85,.06),rgba(6,199,85,0))}
.line-inner{display:flex;gap:22px;align-items:center;justify-content:space-between}
.line-copy p{color:#cfe7d7}
.line-cta{text-align:right}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;letter-spacing:.2px}
.btn{min-height:44px}
.btn-lg{padding:14px 22px;font-size:16px}
.btn-line{background:var(--line);color:#fff}
.btn-line:hover{background:var(--line-dk)}

.faq details{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer}

.disclaimers ul{color:#c2c8d6}
.disclaimers li{margin-bottom:6px}

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:22px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-inner a{color:#b3bad1;text-decoration:none;margin-left:16px}
.footer-inner a:hover{color:#fff}
.small{color:#96a0b4;font-size:14px}

@media (max-width: 880px){
	.hero-inner{grid-template-columns:1fr}
	.hero-copy h1{font-size:32px}
	.grid-3{grid-template-columns:1fr}
	.line-inner{flex-direction:column;align-items:flex-start}
	.line-cta{text-align:left}
}

@media (max-width: 480px){
	.hero-inner{grid-template-areas:"art" "copy";justify-items:center;align-items:start}
	.header-inner{height:auto;padding:10px 0;align-items:flex-start}
	.nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
	.nav a{margin-left:0;margin-right:12px}
	.hero{padding:48px 0 24px}
	.hero-copy h1{font-size:28px}
	.subtitle{font-size:16px}
	.hero-art{display:grid;margin-top:0;grid-template-columns:1fr;justify-items:center}
	.hero-copy{margin-top:12px;text-align:center}
	.hero-art .avatar{max-width:220px;display:block;margin:0 auto}
	.btn,.btn-lg{display:block;width:100%;text-align:center}
	.hero-cta .note{font-size:11px;text-align:center}
	.trust{justify-content:center}
	.line-inner{align-items:center}
	.line-cta{text-align:center}
	.line-copy{text-align:center}
	.feature{padding:14px}
	.steps li{padding:12px}
	.footer-inner{flex-direction:column;align-items:flex-start;gap:8px}
}