/* ============================================================
   Adslume — Wabi-sabi design system
   Palette: warm paper, sumi ink, clay + moss accents
   Type: Noto Serif JP (display) · Inter (UI/body)
   ============================================================ */

:root{
  --paper:#F4F1EC;
  --paper-2:#EDE8E0;
  --surface:#FBF9F5;
  --ink:#2E2A26;
  --ink-soft:#6B635A;
  --ink-faint:#9A9189;
  --hair:rgba(46,42,38,0.12);
  --hair-strong:rgba(46,42,38,0.20);
  --clay:#A66A4A;
  --clay-deep:#8C5638;
  --moss:#6F7D5E;
  --shadow:0 18px 50px -28px rgba(46,42,38,0.40);
  --radius:16px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  margin:0;
  font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
h1,h2,h3,h4{font-family:"Noto Serif JP",serif;font-weight:400;letter-spacing:-0.01em;margin:0;color:var(--ink);}
a{color:inherit;text-decoration:none;}
em{font-style:normal;color:var(--clay);}
::selection{background:rgba(166,106,74,0.18);}

/* ---------- layout helpers ---------- */
.eyebrow{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--clay);font-weight:500;margin:0 0 14px;
}
.section{
  max-width:var(--maxw);margin:0 auto;padding:108px 28px;
}
.section--alt{
  max-width:none;background:var(--paper-2);
}
.infra__wrap{max-width:var(--maxw);margin:0 auto;}
.section__head{max-width:680px;margin-bottom:54px;}
.section__title{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.18;}
.section__lead{margin-top:18px;color:var(--ink-soft);font-size:1.04rem;max-width:600px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Inter",sans-serif;font-weight:500;font-size:.94rem;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn--solid{background:var(--clay);color:#FBF9F5;}
.btn--solid:hover{background:var(--clay-deep);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn--lg{padding:16px 34px;font-size:1rem;}
.btn--block{width:100%;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(244,241,236,0.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:15px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);}
.brand__mark{color:var(--clay);display:flex;}
.brand__name{font-family:"Noto Serif JP",serif;font-size:1.18rem;letter-spacing:.02em;}
.nav__links{display:flex;gap:30px;font-size:.93rem;color:var(--ink-soft);}
.nav__links a{position:relative;padding:4px 0;transition:color .2s;}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:var(--clay);transition:width .28s var(--ease);
}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after{width:100%;}
.nav__actions{display:flex;align-items:center;gap:14px;}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav__toggle span{width:22px;height:1.6px;background:var(--ink);transition:.28s var(--ease);}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:74px 28px 64px;}
.hero__inner{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;}
.hero__title{font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.12;margin:0 0 22px;}
.hero__sub{font-size:1.12rem;color:var(--ink-soft);max-width:480px;margin:0 0 30px;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero__trust{margin-top:26px;font-size:.82rem;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;}
.hero__art{display:flex;justify-content:center;}
.eco{width:100%;max-width:480px;height:auto;}
.eco__cloud rect{fill:var(--surface);stroke:var(--hair-strong);stroke-width:1.4;}
.eco__cloud text{font-family:"Inter",sans-serif;font-size:15px;fill:var(--ink-soft);font-weight:500;}
.eco__hub circle{fill:var(--ink);}
.eco__hub-t1,.eco__hub-t2{font-family:"Noto Serif JP",serif;fill:#FBF9F5;font-size:16px;}
.eco__node rect{fill:var(--surface);stroke:var(--hair-strong);stroke-width:1.4;transition:.3s var(--ease);}
.eco__node text{font-family:"Inter",sans-serif;font-size:14px;fill:var(--ink);font-weight:500;}
.eco__node-sub{font-size:11px !important;fill:var(--ink-faint) !important;font-weight:400 !important;}
.eco__node:hover rect{stroke:var(--clay);}
.eco__wire path{stroke-width:1.6;stroke-dasharray:5 6;opacity:.7;}
.eco__pulse circle{opacity:.5;animation:pulse 2.6s var(--ease) infinite;}
.eco__pulse circle:nth-child(2){animation-delay:.6s;}
.eco__pulse circle:nth-child(3){animation-delay:1.2s;}
.eco__pulse circle:nth-child(4){animation-delay:1.8s;}
@keyframes pulse{0%,100%{opacity:.15;r:2.5}50%{opacity:.7;r:4}}

/* ---------- stats ---------- */
.stats{max-width:var(--maxw);margin:0 auto;padding:8px 28px 12px;}
.stats__inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hair);
}
.stat{background:var(--surface);padding:34px 26px;text-align:center;}
.stat__num{display:block;font-family:"Noto Serif JP",serif;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);}
.stat__label{display:block;margin-top:8px;font-size:.84rem;color:var(--ink-soft);letter-spacing:.02em;}

/* ---------- cards (generic) ---------- */
.cards{display:grid;gap:22px;}
.cards--3{grid-template-columns:repeat(3,1fr);}
.cards--2{grid-template-columns:repeat(2,1fr);}
.card,.adv,.cloud,.plan{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);padding:34px 30px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover,.adv:hover,.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--hair-strong);}

/* product cards */
.card__tag{font-family:"Noto Serif JP",serif;color:var(--clay);font-size:1.1rem;margin-bottom:14px;}
.card__title{font-size:1.4rem;margin-bottom:12px;}
.card__text{color:var(--ink-soft);font-size:.97rem;margin:0 0 20px;}
.card__meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;}
.card__meta li{font-size:.78rem;letter-spacing:.03em;color:var(--ink-soft);border:1px solid var(--hair);border-radius:999px;padding:5px 12px;}

/* cloud cards */
.cloud{padding:38px 34px;}
.cloud__name{font-family:"Noto Serif JP",serif;font-size:1.5rem;margin-bottom:10px;}
.cloud__desc{color:var(--ink-soft);font-size:.98rem;margin:0;}
.infra__list{display:flex;flex-wrap:wrap;gap:14px 34px;margin:40px 0 18px;}
.infra__item{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:.96rem;}
.infra__dot{width:7px;height:7px;border-radius:50%;background:var(--moss);}
.infra__note{text-align:left;color:var(--ink-soft);font-size:1.02rem;margin:8px 0 0;}
.infra__note strong{color:var(--ink);}

/* advantage cards */
.adv__icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--clay);background:rgba(166,106,74,0.10);margin-bottom:18px;
}
.adv__title{font-size:1.18rem;margin-bottom:10px;line-height:1.35;}
.adv__text{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* ---------- data dashboard ---------- */
.dash{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:34px;display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:stretch;
}
.dash__metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:center;}
.metric{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:18px 16px;}
.metric__val{display:block;font-family:"Noto Serif JP",serif;font-size:1.7rem;color:var(--ink);}
.metric__key{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-soft);}
.dash__chart{display:flex;flex-direction:column;}
.dash__chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.dash__chart-head span{font-size:.92rem;color:var(--ink);font-weight:500;}
.dash__chart-sub{font-size:.76rem;color:var(--ink-faint);}
.chart{width:100%;flex:1;min-height:200px;}

/* ---------- pricing ---------- */
.plan{display:flex;flex-direction:column;position:relative;}
.plan--feature{border-color:var(--clay);box-shadow:var(--shadow);}
.plan__flag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--clay);color:#FBF9F5;font-size:.72rem;letter-spacing:.08em;
  padding:5px 14px;border-radius:999px;text-transform:uppercase;font-weight:500;
}
.plan__name{font-size:1.35rem;margin-bottom:14px;}
.plan__price{font-family:"Noto Serif JP",serif;font-size:2.6rem;color:var(--ink);margin:0 0 6px;display:flex;align-items:flex-start;gap:2px;}
.plan__cur{font-size:1.2rem;margin-top:8px;}
.plan__per{font-size:.9rem;color:var(--ink-soft);font-family:"Inter",sans-serif;align-self:flex-end;margin-bottom:10px;margin-left:4px;}
.plan__price--text{font-size:2rem;margin-top:14px;}
.plan__note{color:var(--ink-soft);font-size:.9rem;margin:0 0 20px;min-height:42px;}
.plan__feat{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px;flex:1;}
.plan__feat li{position:relative;padding-left:22px;font-size:.93rem;color:var(--ink-soft);}
.plan__feat li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--moss);}
.pricing__foot{text-align:center;color:var(--ink-soft);font-size:.96rem;margin-top:42px;}
.pricing__foot strong{color:var(--ink);}
.pricing__note{max-width:680px;margin:18px 0 0;padding:14px 20px;border:1px solid rgba(166,106,74,.32);border-radius:12px;background:rgba(166,106,74,.06);color:var(--ink-soft);font-size:.92rem;line-height:1.6;text-align:left;}
.pricing__note strong{color:var(--clay);}

/* ---------- support ---------- */
.support{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:108px 28px;}
.support__ch{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;}
.ch{background:var(--surface);padding:24px 22px;}
.ch__k{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.ch__v{display:block;font-size:.98rem;color:var(--ink);}

/* ---------- cta ---------- */
.cta{max-width:var(--maxw);margin:0 auto;padding:24px 28px 110px;}
.cta__inner{
  background:var(--ink);color:#FBF9F5;border-radius:24px;
  padding:64px 44px;text-align:center;
}
.cta__title{color:#FBF9F5;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px;}
.cta__sub{color:rgba(251,249,245,0.74);max-width:520px;margin:0 auto 32px;font-size:1.05rem;}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta .btn--solid{background:#FBF9F5;color:var(--ink);}
.cta .btn--solid:hover{background:#fff;}
.cta .btn--ghost{border-color:rgba(251,249,245,0.35);color:#FBF9F5;}
.cta .btn--ghost:hover{border-color:#FBF9F5;}

/* ---------- footer ---------- */
.footer{background:var(--paper-2);border-top:1px solid var(--hair);}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:60px 28px 40px;display:grid;grid-template-columns:1.3fr 2fr;gap:48px;}
.footer__tag{color:var(--ink-soft);font-size:.92rem;margin-top:14px;line-height:1.6;}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.footer__col h4{font-family:"Inter",sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;font-weight:600;}
.footer__col a{display:block;color:var(--ink-soft);font-size:.92rem;margin-bottom:10px;transition:color .2s;}
.footer__col a:hover{color:var(--clay);}
.footer__bar{max-width:var(--maxw);margin:0 auto;padding:22px 28px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-faint);}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal:nth-child(2){transition-delay:.06s;}
.reveal:nth-child(3){transition-delay:.12s;}
.reveal:nth-child(4){transition-delay:.18s;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:36px;}
  .hero__art{order:-1;}
  .cards--3{grid-template-columns:1fr 1fr;}
  .dash{grid-template-columns:1fr;}
  .support{grid-template-columns:1fr;gap:30px;}
  .footer__inner{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:680px){
  .nav__links{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--hair);
    transform:scaleY(0);transform-origin:top;opacity:0;transition:.26s var(--ease);
  }
  .nav__links.is-open{transform:scaleY(1);opacity:1;}
  .nav__links a{padding:14px 28px;}
  .nav__toggle{display:flex;}
  .nav__actions .btn--solid{display:none;}
  .stats__inner{grid-template-columns:1fr 1fr;}
  .cards--3,.cards--2{grid-template-columns:1fr;}
  .dash__metrics{grid-template-columns:1fr 1fr;}
  .support__ch{grid-template-columns:1fr;}
  .footer__cols{grid-template-columns:1fr 1fr;}
  .section{padding:78px 22px;}
  .cta__inner{padding:48px 24px;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .eco__pulse circle{animation:none;}
  html{scroll-behavior:auto;}
}