/* =================================================================
   Miseru — miseru.dev landing page
   Charcoal + emerald. Quietly confident developer tool.
   Type: Zen Kaku Gothic New (JP) / Space Grotesk (Latin) / JetBrains Mono
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root{
  /* charcoal base */
  --bg:        #0A0A0B;
  --bg-2:      #0F0F11;
  --panel:     #131316;
  --panel-2:   #18181B;
  --line:      #26262B;
  --line-2:    #313138;

  /* ink */
  --ink:       #ECECEE;
  --ink-2:     #A6A6AE;
  --ink-3:     #6E6E78;

  /* emerald brand */
  --em:        #10B981;
  --em-bright: #34D399;
  --em-deep:   #0B7A57;
  --em-glow:   rgba(16,185,129,.16);

  /* expiration signal language */
  --sig-valid:    #10B981;
  --sig-soon:     #F5C451;
  --sig-expired:  #F26D6D;
  --sig-infinite: #6AA6F5;

  --maxw: 1180px;
  --r: 14px;

  --jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  --display: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--jp); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(16,185,129,.28); color:#fff; }

.mono{ font-family:var(--mono); font-feature-settings:"liga" 0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- section scaffolding ---------- */
section{ position:relative; }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--em);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--em); display:block; }
h2.sec{
  font-family:var(--jp); font-weight:900; font-size:clamp(28px,4.4vw,46px);
  line-height:1.18; letter-spacing:.01em; margin:18px 0 0; max-width:18ch;
  text-wrap:balance;
}
.sec-lead{ color:var(--ink-2); font-size:clamp(15px,1.5vw,17px); margin:16px 0 0; max-width:58ch; }

/* =================================================================
   NAV
   ================================================================= */
header.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
header.nav.scrolled{ border-bottom-color:var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo{ width:32px; height:32px; flex:none; }
.brand .name{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.02em; }
.brand .name .ja{ font-family:var(--jp); font-weight:700; color:var(--ink); }
.brand .name .en{ color:var(--ink-3); font-size:13px; margin-left:7px; letter-spacing:.14em; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a.txt{ color:var(--ink-2); font-size:14px; padding:9px 13px; border-radius:9px; transition:color .2s, background .2s; }
.nav-links a.txt:hover{ color:var(--ink); background:var(--panel); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1;
  padding:12px 18px; border-radius:11px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .25s ease, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn .gh{ width:17px; height:17px; }
.btn-primary{ background:var(--em); color:#04130D; box-shadow:0 0 0 1px rgba(16,185,129,.5), 0 10px 30px -10px var(--em-glow); }
.btn-primary:hover{ background:var(--em-bright); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(52,211,153,.6), 0 16px 40px -12px rgba(16,185,129,.4); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink-3); background:var(--panel); }
.btn-lg{ padding:15px 24px; font-size:16px; border-radius:13px; }
.btn:focus-visible{ outline:2px solid var(--em-bright); outline-offset:3px; }
a:focus-visible{ outline:2px solid var(--em-bright); outline-offset:3px; border-radius:6px; }

/* =================================================================
   HERO
   ================================================================= */
.hero{ padding:clamp(56px,9vw,104px) 0 clamp(60px,8vw,96px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.04fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.hero-copy .pill{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  color:var(--ink-2); background:var(--panel); border:1px solid var(--line);
  padding:7px 13px; border-radius:999px; margin-bottom:26px;
}
.hero-copy .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--em); box-shadow:0 0 0 3px var(--em-glow); }
.hero h1{
  font-family:var(--jp); font-weight:900; font-size:clamp(40px,6.4vw,72px);
  line-height:1.08; letter-spacing:.005em; margin:0; text-wrap:balance;
}
.hero h1 .em{ color:var(--em); }
.hero .lead{ color:var(--ink-2); font-size:clamp(16px,1.7vw,18.5px); line-height:1.75; margin:24px 0 0; max-width:46ch; }
.hero .lead b{ color:var(--ink); font-weight:700; }
.hero-cta{ display:flex; gap:13px; margin-top:34px; flex-wrap:wrap; }
.hero-sub{ display:flex; gap:20px; margin-top:26px; flex-wrap:wrap; }
.hero-sub .item{ display:flex; align-items:center; gap:9px; color:var(--ink-3); font-size:13px; }
.hero-sub .item .ck{ color:var(--em); width:15px; height:15px; flex:none; }

/* circuit backdrop */
.circuit{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 72%); }
.hero-glow{ position:absolute; top:-160px; right:-120px; width:620px; height:620px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, var(--em-glow) 0%, transparent 62%); }

/* ---------- hero demo (terminal + PR comment) ---------- */
.demo{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; }
.win{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 90px -50px #000, 0 2px 0 0 rgba(255,255,255,.02) inset; }
.win-bar{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel-2); }
.win-bar .lights{ display:flex; gap:7px; }
.win-bar .lights i{ width:11px; height:11px; border-radius:50%; display:block; background:var(--line-2); }
.win-bar .ttl{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-left:4px; }
.term{ padding:16px 18px; font-family:var(--mono); font-size:13px; line-height:1.85; }
.term .ln{ white-space:pre-wrap; word-break:break-all; }
.term .pr{ color:var(--em); }
.term .cmd{ color:var(--ink); }
.term .flag{ color:var(--ink-2); }
.term .out{ color:var(--ink-3); }
.term .ok{ color:var(--sig-valid); }
.term .url{ color:var(--em-bright); }
.caret{ display:inline-block; width:8px; height:15px; background:var(--em); vertical-align:-2px; margin-left:2px;
  animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* PR comment card (github-styled, original) */
.pr{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pr-top{ display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line); background:var(--panel-2); }
.pr-top .av{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#2b2b31,#1a1a1e); border:1px solid var(--line-2); flex:none; display:flex; align-items:center; justify-content:center; }
.pr-top .av svg{ width:14px; height:14px; color:var(--ink-2); }
.pr-top .who{ font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.pr-top .bot{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--line-2); border-radius:5px; padding:1px 6px; }
.pr-top .when{ font-size:11.5px; color:var(--ink-3); margin-left:auto; }
.pr-body{ padding:14px 15px; }
.pr-body .cmt{ font-size:13px; color:var(--ink-2); margin:0 0 12px; }
.pr-body .cmt code{ font-family:var(--mono); font-size:12px; color:var(--em-bright); background:rgba(16,185,129,.08); padding:1px 6px; border-radius:5px; }

/* faux app screenshot (CSS blocks, not fake branding) */
.shot{ position:relative; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--bg-2);
  transition:filter .8s ease, opacity .8s ease; }
.shot .shot-bar{ height:30px; background:var(--panel-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 11px; }
.shot .shot-bar i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.shot .shot-bar .u{ font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-left:8px; }
.shot .shot-in{ display:flex; height:148px; }
.shot .sb{ width:54px; border-right:1px solid var(--line); padding:10px 8px; display:flex; flex-direction:column; gap:7px; }
.shot .sb b{ height:6px; border-radius:3px; background:var(--line-2); display:block; }
.shot .main{ flex:1; padding:13px; display:flex; flex-direction:column; gap:9px; }
.shot .main .h{ height:11px; width:54%; border-radius:4px; background:linear-gradient(90deg,var(--em-deep),var(--line-2)); }
.shot .main .row{ display:flex; gap:9px; }
.shot .main .card{ flex:1; height:46px; border-radius:7px; background:var(--panel-2); border:1px solid var(--line); }
.shot .main .card.accent{ border-color:var(--em-deep); box-shadow:inset 0 0 22px -12px var(--em); }
.shot .main .bars{ display:flex; gap:5px; align-items:flex-end; height:32px; }
.shot .main .bars b{ width:13px; border-radius:3px 3px 0 0; background:var(--line-2); }
.shot .name-tag{ position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  background:rgba(10,10,11,.78); border:1px solid var(--line); padding:3px 8px; border-radius:6px; backdrop-filter:blur(4px); }

.shot.state-expired{ filter:grayscale(1) brightness(.42); }
.shot.state-soon{ box-shadow:inset 0 0 0 2px rgba(245,196,81,.5); }

.pr-meta{ display:flex; align-items:center; gap:10px; margin-top:13px; flex-wrap:wrap; }
.pr-meta .url{ font-family:var(--mono); font-size:11px; color:var(--ink-3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* expiration badge */
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--jp); font-weight:700;
  font-size:11.5px; line-height:1; padding:6px 11px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.badge .d{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.badge.valid{ color:var(--sig-valid); }
.badge.soon{ color:var(--sig-soon); }
.badge.expired{ color:var(--sig-expired); }
.badge.infinite{ color:var(--sig-infinite); }
.badge .mono{ font-family:var(--mono); font-size:11px; }

/* =================================================================
   PAIN
   ================================================================= */
.pain{ padding:clamp(64px,9vw,116px) 0; border-top:1px solid var(--line); background:var(--bg-2); }
.pain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; margin-top:46px; }
.pain-cards{ display:flex; flex-direction:column; gap:14px; }
.pain-card{ display:flex; gap:15px; padding:20px 22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.pain-card .ic{ width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--sig-expired); background:rgba(242,109,109,.06); }
.pain-card .ic svg{ width:20px; height:20px; }
.pain-card h3{ margin:0 0 5px; font-size:16px; font-weight:700; }
.pain-card p{ margin:0; color:var(--ink-2); font-size:14px; line-height:1.65; }
.pain-card p code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--panel-2); padding:1px 6px; border-radius:5px; }
.pain-solve{ margin-top:18px; padding:20px 22px; border:1px solid var(--em-deep); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(16,185,129,.08), rgba(16,185,129,.02)); display:flex; gap:15px; }
.pain-solve .ic{ color:var(--em); border-color:var(--em-deep); background:rgba(16,185,129,.1); }
.pain-solve h3{ color:var(--em-bright); }
.pain-solve p code{ color:var(--em-bright); background:rgba(16,185,129,.1); }

/* =================================================================
   HOW IT WORKS — 3 steps
   ================================================================= */
.how{ padding:clamp(64px,9vw,116px) 0; }
.steps{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s; }
.step{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 24px; display:flex; flex-direction:column; }
.step::before{ counter-increment:s; content:"0" counter(s); font-family:var(--display); font-weight:700;
  font-size:14px; color:var(--em); letter-spacing:.1em; }
.step .st-h{ font-size:18px; font-weight:700; margin:14px 0 8px; }
.step .st-p{ color:var(--ink-2); font-size:13.5px; line-height:1.65; margin:0 0 18px; }
.step .st-p code{ font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2); padding:1px 6px; border-radius:5px; }
.step .codebox{ margin-top:auto; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 14px;
  font-family:var(--mono); font-size:11.8px; line-height:1.7; color:var(--ink-2); overflow-x:auto; }
.codebox .pr-n{ color:var(--em); } .codebox .ok{ color:var(--sig-valid); } .codebox .c{ color:var(--ink-3); }
.codebox .k{ color:var(--em-bright); } .codebox .s{ color:var(--sig-soon); }
.step-arrow{ position:absolute; top:50%; right:-19px; z-index:3; color:var(--line-2); }
.step-arrow svg{ width:22px; height:22px; }

/* =================================================================
   FEATURES
   ================================================================= */
.features{ padding:clamp(64px,9vw,116px) 0; border-top:1px solid var(--line); background:var(--bg-2); }
.feat-grid{ margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; transition:border-color .25s, transform .25s; }
.feat:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.feat .ic{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--em); background:rgba(16,185,129,.06); }
.feat .ic svg{ width:21px; height:21px; }
.feat h3{ font-size:16.5px; font-weight:700; margin:18px 0 8px; }
.feat p{ color:var(--ink-2); font-size:13.5px; line-height:1.66; margin:0; }
.feat p code{ font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2); padding:1px 6px; border-radius:5px; }
.feat.pro{ position:relative; border-color:var(--line-2); background:linear-gradient(180deg, rgba(106,166,245,.05), transparent); }
.feat.pro .tag{ position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--sig-infinite);
  border:1px solid color-mix(in srgb,var(--sig-infinite) 45%, transparent); padding:3px 9px; border-radius:999px; }
.feat.pro .ic{ color:var(--sig-infinite); border-color:color-mix(in srgb,var(--sig-infinite) 40%, var(--line-2)); background:rgba(106,166,245,.07); }

/* =================================================================
   EXPIRY POLICY
   ================================================================= */
.policy{ padding:clamp(64px,9vw,116px) 0; }
.axis{ margin:46px 0 26px; }
.axis-bar{ position:relative; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--sig-valid), var(--sig-soon) 52%, var(--sig-infinite)); opacity:.65; }
.axis-labels{ display:flex; justify-content:space-between; margin-top:13px; }
.axis-labels span{ font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.axis-labels .lt{ color:var(--sig-valid); } .axis-labels .rt{ color:var(--sig-infinite); }
.pol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pol{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; }
.pol.default{ border-color:var(--em-deep); box-shadow:0 0 0 1px var(--em-deep), 0 20px 50px -34px var(--em-glow); }
.pol .pol-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pol h3{ font-size:17px; font-weight:700; margin:0; }
.pol .recommend{ font-family:var(--mono); font-size:10.5px; color:var(--em); border:1px solid var(--em-deep); padding:3px 8px; border-radius:999px; }
.pol .pol-p{ color:var(--ink-2); font-size:13.5px; line-height:1.65; margin:14px 0 18px; }
.pol .meter{ display:flex; gap:7px; margin-top:auto; }
.pol .meter .m{ flex:1; }
.pol .meter .lab{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-bottom:5px; display:block; }
.pol .meter .track{ height:5px; border-radius:999px; background:var(--panel-2); overflow:hidden; }
.pol .meter .fill{ height:100%; border-radius:999px; }
.disclosure{ margin-top:26px; display:flex; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.disclosure .ic{ color:var(--ink-2); flex:none; }
.disclosure h4{ margin:0 0 5px; font-size:14.5px; font-weight:700; }
.disclosure p{ margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.65; }
.disclosure p b{ color:var(--ink); }
.disclosure p code{ font-family:var(--mono); font-size:12px; color:var(--ink); }

/* =================================================================
   FINAL CTA + FOOTER
   ================================================================= */
.cta{ padding:clamp(72px,10vw,128px) 0; border-top:1px solid var(--line); position:relative; overflow:hidden; text-align:center; }
.cta .cta-glow{ position:absolute; left:50%; top:30%; transform:translateX(-50%); width:760px; height:520px; pointer-events:none;
  background:radial-gradient(circle, var(--em-glow) 0%, transparent 60%); }
.cta h2{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,5vw,54px); line-height:1.15; margin:18px 0 0; position:relative; text-wrap:balance; }
.cta h2 .em{ color:var(--em); }
.cta p{ color:var(--ink-2); font-size:16px; margin:18px auto 0; max-width:48ch; position:relative; }
.cta .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; position:relative; }

footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:54px 0 40px; }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.foot-brand{ max-width:300px; }
.foot-brand .brand{ margin-bottom:14px; }
.foot-tag{ font-family:var(--jp); font-weight:700; color:var(--ink-2); font-size:14px; }
.foot-tag .em{ color:var(--em); }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:600; }
.foot-col a, .foot-col span{ display:block; color:var(--ink-2); font-size:14px; padding:5px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--em); }
.foot-bottom{ margin-top:46px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; }
.foot-bottom .cp{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.foot-bottom .ph{ font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--ink-2); }
.foot-bottom .ph .em{ color:var(--em); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 940px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .pain-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step-arrow{ display:none; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .pol-grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .wrap{ padding:0 18px; }
  .nav-links .txt{ display:none; }
  .feat-grid{ grid-template-columns:1fr; }
  .hero-sub{ gap:12px; }
  .foot-cols{ gap:32px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .caret{ display:none; }
}