:root{
  --bg:#0b0e14;
  --bg-soft:#11151d;
  --panel:#151a24;
  --panel-border:#232a38;
  --text:#e8ecf4;
  --text-dim:#9aa4b7;
  --accent:#5ee6c5;
  --accent-strong:#2fd3a8;
  --danger:#ff6b6b;
  --discord-bg:#313338;
  --discord-panel:#2b2d31;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1140px;
  font-size:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.pc-only{display:inline;}
@media (max-width:640px){.pc-only{display:none;}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;transition:.2s ease;
}
.btn-primary{background:var(--accent);color:#06211a;}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--panel-border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-small{padding:10px 20px;font-size:.85rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,20,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-border);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.1rem;letter-spacing:.02em;}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#2a9d8f);
  display:flex;align-items:center;justify-content:center;color:#06211a;
}
.brand-mark i{width:20px;height:20px;}
.brand-accent{color:var(--accent);}
.main-nav{display:flex;gap:28px;}
.main-nav a{color:var(--text-dim);font-size:.9rem;font-weight:500;}
.main-nav a:hover{color:var(--text);}
@media (max-width:860px){.main-nav{display:none;}}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 72px;overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(60%) brightness(.35);transform:scale(1.05);
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,20,.55) 0%, rgba(11,14,20,.92) 75%, var(--bg) 100%);
}
.hero-inner{position:relative;max-width:760px;margin:0 auto;padding:0 24px;text-align:center;}
.eyebrow{
  color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:14px;
}
.eyebrow.center{text-align:center;}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;line-height:1.35;margin-bottom:20px;}
.hero-sub{color:var(--text-dim);font-size:1.02rem;margin-bottom:34px;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}
.hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;align-items:center;}
.stat-num{font-family:"JetBrains Mono",monospace;font-size:2.1rem;font-weight:700;color:var(--accent);}
.stat-num small{font-size:1rem;margin-left:2px;}
.stat-label{color:var(--text-dim);font-size:.8rem;margin-top:4px;}

/* ---------- section generic ---------- */
section{padding:84px 0;}
.section-title{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;margin-bottom:14px;}
.section-title.center{text-align:center;}
.section-sub{color:var(--text-dim);max-width:560px;}
.section-sub.center{margin:0 auto 48px;text-align:center;}

/* ---------- pain ---------- */
.pain{background:var(--bg-soft);}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
@media (max-width:900px){.pain-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pain-grid{grid-template-columns:1fr;}}
.pain-card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:26px 22px;
}
.pain-card i{width:26px;height:26px;color:var(--danger);margin-bottom:14px;}
.pain-card p{color:var(--text-dim);font-size:.92rem;}

/* ---------- features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:30px 24px;transition:.2s;
}
.feature-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.feature-icon{
  width:46px;height:46px;border-radius:12px;background:rgba(94,230,197,.12);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.feature-icon i{width:22px;height:22px;color:var(--accent);}
.feature-card h3{font-size:1.05rem;margin-bottom:8px;}
.feature-card p{color:var(--text-dim);font-size:.88rem;}

/* ---------- demo ---------- */
.demo-section{background:var(--bg-soft);}
.demo-panel{
  display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:12px;
}
@media (max-width:860px){.demo-panel{grid-template-columns:1fr;}}
.demo-feed, .demo-discord{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;height:460px;
}
.demo-panel-head{
  display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--panel-border);font-size:.85rem;color:var(--text-dim);
}
.demo-panel-head i{width:16px;height:16px;color:var(--accent);}
.demo-status{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.75rem;padding:3px 10px;border-radius:999px;background:rgba(154,164,183,.15);}
.demo-status.live{background:rgba(94,230,197,.18);color:var(--accent);}
.demo-feed-list{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.feed-empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--text-dim);text-align:center;gap:10px;font-size:.85rem;padding:20px;
}
.feed-empty i{width:28px;height:28px;}
.feed-item{
  display:flex;gap:12px;padding:10px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);
  background:var(--bg-soft);animation:slideIn .35s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.feed-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.feed-item-body{flex:1;min-width:0;}
.feed-item-title{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-item-meta{display:flex;gap:10px;font-size:.75rem;color:var(--text-dim);margin-top:4px;font-family:"JetBrains Mono",monospace;}
.feed-item-badge{font-size:.7rem;color:var(--accent);font-weight:700;}

.demo-discord{background:var(--discord-bg);}
.discord-head{display:flex;align-items:center;gap:8px;padding:16px 18px;border-bottom:1px solid #26282c;color:#dbdee1;font-weight:700;font-size:.9rem;}
.discord-head i{width:16px;height:16px;color:#949ba4;}
.discord-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
.discord-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#80848e;gap:10px;font-size:.85rem;}
.discord-placeholder i{width:28px;height:28px;}
.discord-msg{animation:slideIn .35s ease;background:var(--discord-panel);border-radius:10px;padding:10px;border-left:3px solid var(--accent);}
.discord-msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.discord-msg-bot{width:22px;height:22px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
.discord-msg-bot i{width:13px;height:13px;color:#06211a;}
.discord-msg-name{font-size:.78rem;font-weight:700;color:#f2f3f5;}
.discord-msg-name .tag{font-size:.6rem;background:#5865f2;color:#fff;padding:1px 5px;border-radius:4px;margin-left:4px;}
.discord-embed-mini{display:flex;gap:10px;}
.discord-embed-mini img{width:48px;height:48px;object-fit:cover;border-radius:6px;}
.discord-embed-mini-body{font-size:.76rem;color:#dbdee1;}
.discord-embed-mini-body strong{display:block;font-size:.8rem;color:#fff;margin-bottom:3px;}
.discord-embed-mini-body span{display:block;color:#949ba4;font-family:"JetBrains Mono",monospace;font-size:.7rem;}

.demo-controls{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;}
.demo-latency{font-family:"JetBrains Mono",monospace;color:var(--text-dim);font-size:.9rem;}
.demo-latency span{color:var(--accent);font-weight:700;}

/* ---------- discord spec ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}
.spec-list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px;}
.spec-list li{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.95rem;}
.spec-list i{width:18px;height:18px;color:var(--accent);background:rgba(94,230,197,.12);border-radius:50%;padding:3px;flex-shrink:0;}

.discord-card{background:var(--discord-bg);border-radius:var(--radius);padding:20px;border:1px solid #26282c;}
.discord-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.discord-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#2a9d8f);display:flex;align-items:center;justify-content:center;}
.discord-avatar i{width:20px;height:20px;color:#06211a;}
.discord-bot-name{color:#fff;font-weight:700;font-size:.92rem;}
.bot-badge{font-size:.6rem;background:#5865f2;color:#fff;padding:1px 6px;border-radius:4px;margin-left:4px;vertical-align:middle;}
.discord-time{color:#949ba4;font-size:.72rem;}
.discord-embed{background:var(--discord-panel);border-left:4px solid var(--accent);border-radius:8px;overflow:hidden;}
.discord-embed img{width:100%;height:200px;object-fit:cover;}
.embed-body{padding:16px;}
.embed-title{color:#fff;font-weight:700;font-size:.95rem;margin-bottom:12px;}
.embed-row{display:flex;justify-content:space-between;font-size:.82rem;color:#949ba4;padding:4px 0;border-bottom:1px dashed #3a3c42;}
.embed-row strong{color:#dbdee1;font-family:"JetBrains Mono",monospace;}
.embed-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--accent);font-size:.82rem;font-weight:700;}
.embed-link i{width:14px;height:14px;}

/* ---------- how ---------- */
.how{background:var(--bg-soft);}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){.how-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.how-grid{grid-template-columns:1fr;}}
.how-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:26px 22px;position:relative;}
.how-num{position:absolute;top:18px;right:20px;font-family:"JetBrains Mono",monospace;color:var(--panel-border);font-size:1.6rem;font-weight:700;}
.how-card i{width:24px;height:24px;color:var(--accent);margin-bottom:14px;}
.how-card h3{font-size:1rem;margin-bottom:8px;}
.how-card p{color:var(--text-dim);font-size:.85rem;}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--panel-border);}
.gallery-item img{height:180px;width:100%;object-fit:cover;transition:.3s;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:12px 14px;font-size:.82rem;font-weight:700;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
}

/* ---------- deliver ---------- */
.deliver-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.deliver-card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-sm);
  padding:18px;display:flex;align-items:center;gap:12px;font-size:.88rem;
}
.deliver-card i{width:20px;height:20px;color:var(--accent);flex-shrink:0;}

/* ---------- faq ---------- */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:18px 20px;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;position:relative;padding-right:24px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;color:var(--accent);font-size:1.2rem;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{color:var(--text-dim);font-size:.88rem;margin-top:12px;}

/* ---------- cta ---------- */
.cta{text-align:center;}
.cta-inner h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;margin-bottom:14px;}
.cta-inner p{color:var(--text-dim);max-width:520px;margin:0 auto 30px;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--panel-border);padding:40px 0;background:var(--bg-soft);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.footer-inner p{color:var(--text-dim);font-size:.8rem;max-width:480px;}