/* Base reset */
*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{
  --bg:#0b0b11;
  --panel:#13131c;
  --ink:#f8f7f4;
  --muted:#b9b5c8;
  --gold:#d4af37;
  --gold-strong:#b8860b;
  --accent1:#6a1b9a;
  --accent2:#c2185b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(12px); animation:reveal .8s ease forwards}
  .reveal-2{animation-delay:.15s}
  .reveal-3{animation-delay:.3s}
}
@keyframes reveal{to{opacity:1; transform:none}}

body{
  margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN','Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink); background:var(--bg) url('../img/bg.svg') center/cover no-repeat fixed;
}
a{color:var(--ink); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(10,10,15,.9), rgba(10,10,15,.6));
  border-bottom:1px solid rgba(212,175,55,.25);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.08em;
}
.brand .logo{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(#fff8, #ffd54f, #b8860b);
  color:#2b1d00; font-weight:900;
  box-shadow:0 2px 10px rgba(184,134,11,.35), inset 0 0 0 1px #7a5d00;
}
.nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.nav a{opacity:.9}
.nav a:hover{opacity:1}
.cta{
  margin-left:8px; padding:10px 16px; border-radius:999px;
  background:linear-gradient(90deg, #ffd54f, #b8860b);
  color:#301d00; font-weight:700;
  box-shadow:0 6px 18px rgba(184,134,11,.35);
}

.hero{position:relative; overflow:hidden}
.hero .wrap{padding:64px 0 32px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(212,175,55,.4);
  background:rgba(0,0,0,.35);
  font-size:14px; color:#ffe9b0;
}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--gold)}
h1{font-size:42px; line-height:1.2; margin:16px 0 10px; letter-spacing:.02em}
h1 .gold{background:linear-gradient(90deg,#fff3b0,#ffd54f,#b8860b); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{max-width:720px; color:var(--muted); font-size:16px}

.ribbon{
  margin:28px 0; border:1px solid rgba(212,175,55,.35);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ribbon ul{display:flex; flex-wrap:wrap; margin:0; padding:10px; list-style:none; gap:10px; justify-content:space-between}
.ribbon li{padding:10px 14px; border-radius:10px; background:rgba(0,0,0,.35); font-size:14px; border:1px solid rgba(255,255,255,.07)}

.section{padding:42px 0}
.panel{
  background:linear-gradient(180deg, rgba(19,19,28,.9), rgba(19,19,28,.75));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)
}
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width:900px){
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  h1{font-size:34px}
}

.card{border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px; background:rgba(0,0,0,.25)}
.card h3{margin:0 0 8px}
.meta{color:#e5d9a8; font-size:14px; letter-spacing:.06em}

.kpis{display:flex; gap:16px; flex-wrap:wrap; margin-top:18px}
.kpi{flex:1 1 180px; padding:14px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06); text-align:center}
.kpi .n{font-size:28px; font-weight:800; color:#ffe08a}
.kpi .l{font-size:12px; color:var(--muted)}

.steps{counter-reset: step}
.step{position:relative; padding-left:58px}
.step:before{
  counter-increment: step; content:counter(step);
  position:absolute; left:0; top:0; width:38px; height:38px;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, #ffd54f, #b8860b); color:#2a1a00; font-weight:800;
  box-shadow:0 6px 16px rgba(184,134,11,.35);
}

.faq details{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px; background:rgba(0,0,0,.25)}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:var(--muted); margin:10px 0 0}

.footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.5)}
.small{font-size:12px; color:#c9c3a6}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(90deg,#ffd54f,#b8860b); color:#2a1a00; font-weight:800;
  box-shadow:0 10px 24px rgba(184,134,11,.35);
}
.btn.outline{
  background:transparent; color:#ffe08a; border:1px solid rgba(212,175,55,.6)
}
.form input, .form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); color:var(--ink)
}
.form textarea{min-height:120px; resize:vertical}
label{font-size:12px; color:#e5d9a8}