:root{
  --bg:#0b0f14;
  --bg-soft:#0f141b;
  --panel:#141a22;
  --panel-border:#232b36;
  --text:#e7edf4;
  --text-dim:#9aa7b4;
  --text-faint:#64707d;
  --accent:#ffb020;
  --accent-soft:#ffb02022;
  --up:#ff5a5a;
  --down:#2ecf7a;
  --line:#2a3340;
  --white:#ffffff;
  --radius:14px;
  --maxw:1120px;
  font-size:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.04em;color:var(--accent);
  background:var(--accent-soft);border:1px solid #ffb02044;
  padding:6px 14px;border-radius:999px;font-weight:600;
}
h1,h2,h3{font-weight:700;letter-spacing:.01em;margin:0 0 .5em;}
h1{font-size:clamp(28px,4.2vw,46px);line-height:1.35;}
h2{font-size:clamp(22px,3vw,32px);}
h3{font-size:19px;}
p{color:var(--text-dim);margin:0 0 1em;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,20,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;}
.brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),#ff7a1a);
  display:flex;align-items:center;justify-content:center;color:#1a1200;
}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--text-faint);}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{font-size:14.5px;color:var(--text-dim);transition:color .15s;}
nav.links a:hover,nav.links a.active{color:var(--text);}
.badge-client{
  display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--panel-border);
  padding:6px 12px 6px 6px;border-radius:999px;font-size:13px;color:var(--text-dim);
}
.badge-client img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
.navtoggle{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:72px 0 64px;
  border-bottom:1px solid var(--panel-border);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 0%, #ffb02014 0%, transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero h1{margin-bottom:20px;}
.hero h1 .hl{color:var(--accent);}
.hero-sub{font-size:16px;color:var(--text-dim);max-width:520px;}
.hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-media{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--panel-border);}
.hero-media img{width:100%;height:340px;object-fit:cover;filter:saturate(1.1) brightness(.85);}
.hero-media .tag{
  position:absolute;bottom:16px;left:16px;right:16px;
  background:rgba(10,13,17,.72);backdrop-filter:blur(6px);
  border:1px solid #ffffff22;border-radius:10px;padding:12px 14px;font-size:13px;color:var(--text);
}
.hero-stats{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;}
.hero-stat b{display:block;font-size:24px;color:var(--white);}
.hero-stat span{font-size:12.5px;color:var(--text-faint);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:10px;font-weight:700;font-size:14.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .12s,opacity .12s;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:#1a1200;}
.btn-primary:hover{opacity:.92;}
.btn-ghost{background:transparent;border-color:var(--panel-border);color:var(--text);}
.btn-ghost:hover{border-color:#ffffff55;}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;justify-content:center;}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.demo-grid{grid-template-columns:1.5fr 1fr;align-items:start;}
.card{
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--radius);padding:26px;
}
.card .icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card h3{margin-bottom:8px;}
.card p{font-size:14.5px;margin-bottom:0;}
.card .num{
  font-size:13px;color:var(--text-faint);font-weight:700;letter-spacing:.06em;
}

.step-row{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--panel-border);}
.step-row:last-child{border-bottom:none;}
.step-num{
  width:34px;height:34px;border-radius:50%;background:var(--panel);
  border:1px solid var(--panel-border);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.step-row h3{margin-bottom:4px;font-size:16px;}
.step-row p{font-size:14px;margin:0;}

/* ---------- photo section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split img{border-radius:16px;border:1px solid var(--panel-border);height:360px;width:100%;object-fit:cover;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.check-list{list-style:none;margin:18px 0 0;padding:0;}
.check-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:14.5px;color:var(--text-dim);}
.check-list svg{flex:0 0 auto;color:var(--down);margin-top:2px;}

/* ---------- quote box ---------- */
.quote-box{
  background:linear-gradient(135deg,#171c24,#11151b);
  border:1px solid var(--panel-border);border-radius:16px;padding:28px 32px;
  display:flex;gap:18px;align-items:flex-start;
}
.quote-box svg{color:var(--accent);flex:0 0 auto;margin-top:2px;}
.quote-box p{color:var(--text);font-size:14.5px;margin:0;}

/* ---------- table / sheet mock ---------- */
.sheet{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  overflow:hidden;
}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--panel-border);background:#10151c;
}
.sheet-head .title{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim);}
.sheet-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.sheet-table th{
  text-align:left;padding:10px 14px;color:var(--text-faint);font-weight:600;font-size:12.5px;
  border-bottom:1px solid var(--panel-border);white-space:nowrap;
}
.sheet-table td{padding:10px 14px;border-bottom:1px solid #1b222c;color:var(--text);vertical-align:middle;}
.sheet-table tr:last-child td{border-bottom:none;}
.sheet-table input,.sheet-table select{
  background:#0e1319;border:1px solid var(--panel-border);color:var(--text);
  border-radius:7px;padding:6px 8px;font-size:13px;width:100%;
}
.px{font-variant-numeric:tabular-nums;font-weight:700;}
.px.up{color:var(--up);}
.px.down{color:var(--down);}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap;
}
.sheet-table td:nth-child(6){white-space:nowrap;}
.sheet-table{min-width:760px;}
.pill.watching{background:#ffb02022;color:var(--accent);}
.pill.notified{background:#2ecf7a22;color:var(--down);}
.row-del{background:none;border:0;color:var(--text-faint);cursor:pointer;font-size:16px;}
.row-del:hover{color:var(--up);}
.sheet-foot{padding:14px 18px;border-top:1px solid var(--panel-border);display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- phone mock / LINE ---------- */
.phone-stage{
  position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;
}
.phone{
  width:300px;height:560px;border-radius:38px;background:#05070a;
  border:8px solid #1c232c;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px #000;
}
.phone .notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:22px;background:#1c232c;border-radius:0 0 14px 14px;z-index:5;
}
.phone .screen{
  position:absolute;inset:0;background:linear-gradient(180deg,#0e1420,#090c11);
  padding:46px 14px 14px;overflow:hidden;
}
.phone .clock{text-align:center;color:#e7edf4;font-size:13px;margin-bottom:18px;opacity:.7;}
.line-msg{
  background:#ffffff;color:#1b1b1b;border-radius:14px;padding:14px 16px;
  font-size:12.5px;line-height:1.6;box-shadow:0 10px 24px -8px #000;
  transform:translateY(-140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;
}
.line-msg.show{transform:translateY(0);opacity:1;}
.line-msg .app{
  display:flex;align-items:center;gap:8px;font-weight:700;font-size:11.5px;color:#06c755;margin-bottom:8px;
}
.line-msg .app .dot{width:18px;height:18px;border-radius:5px;background:#06c755;display:flex;align-items:center;justify-content:center;color:#fff;}
.line-msg b{display:block;font-size:13px;margin-bottom:2px;}
.phone-idle{color:var(--text-faint);text-align:center;font-size:13px;margin-top:40px;}

/* ---------- log ---------- */
.log{margin-top:18px;max-height:220px;overflow:auto;}
.log-item{
  display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--panel-border);font-size:13px;color:var(--text-dim);
}
.log-item b{color:var(--text);}
.log-item .t{color:var(--text-faint);font-size:11.5px;white-space:nowrap;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--panel-border);padding:20px 0;}
.faq-q{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;font-size:15.5px;gap:16px;}
.faq-q svg{flex:0 0 auto;transition:transform .2s;color:var(--text-faint);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:320px;}
.faq-a p{padding-top:12px;font-size:14.5px;}

.compare{width:100%;border-collapse:collapse;font-size:14px;}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--panel-border);text-align:left;}
.compare th{color:var(--text-faint);font-size:12.5px;font-weight:700;}
.compare td.good{color:var(--down);font-weight:700;}
.compare td.warn{color:var(--accent);font-weight:700;}

.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.tag{background:var(--panel);border:1px solid var(--panel-border);padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--text-dim);}

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(135deg,#171107,#0b0f14 60%);
  border:1px solid #ffb02033;border-radius:20px;padding:48px;text-align:center;
}
.cta-band h2{margin-bottom:10px;}
.cta-band p{max-width:520px;margin:0 auto 26px;}

footer.site{border-top:1px solid var(--panel-border);padding:40px 0;margin-top:40px;}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-row .f-links{display:flex;gap:20px;font-size:13.5px;color:var(--text-dim);}
.footer-note{font-size:12.5px;color:var(--text-faint);margin-top:18px;line-height:1.8;}

@media (max-width:860px){
  .hero-grid,.split,.demo-grid{grid-template-columns:1fr;}
  .split.reverse{direction:ltr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  nav.links{
    position:fixed;inset:60px 0 0 0;background:var(--bg);flex-direction:column;
    padding:24px;gap:18px;transform:translateX(100%);transition:transform .2s;z-index:40;
  }
  nav.links.open{transform:translateX(0);}
  .navtoggle{display:block;}
}
@media (max-width:620px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .cta-band{padding:32px 20px;}
  .hero-media img{height:220px;}
  .compare{font-size:12.5px;}
}