/* ══════════════════════════════════════════
   tacit — landing page
   ══════════════════════════════════════════ */

:root{
  --bg:      #0b0d12;
  --band:    #0d0f15;

  --ink:     #e8eaf0;
  --ink-2:   #a8b0c0;
  --ink-3:   #7b8397;
  --ink-4:   #5f6779;
  --ink-5:   #4d5566;

  --rule:    #191d26;
  --edge:    #1b2029;

  --self:    #ff6b81;
  --peer:    #6fa8ff;
  --both:    #ffb648;
  --accent:  #ffb0bc;

  --dot-idle: rgba(255,255,255,.3);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Hiragino Sans", "Noto Sans JP", sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: rgba(255,107,129,.3); }

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: #ffc6cf; }

h1, h2, h3, p, ul{ margin: 0; }
ul{ list-style: none; padding: 0; }

:focus-visible{ outline: 2px solid var(--peer); outline-offset: 3px; border-radius: 4px; }

/* ── layout primitives ─────────────────── */
.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}
.section{
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 10vw, 120px);
}
.band{
  background: var(--band);
  border-top: 1px solid var(--rule);
}
.measure{ max-width: 34em; }

/* ── type ──────────────────────────────── */
.display{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: clamp(46px, 6.2vw, 82px);
}
.display em{ font-style: italic; color: var(--accent); }

.display--md{
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.display--lg{
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.1;
  text-wrap: balance;
}

.eyebrow{
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8b93a6;
}
.lede{
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 30em;
  text-wrap: pretty;
}
.body{
  font-size: 17.5px;
  line-height: 1.8;
  color: #9aa2b4;
  text-wrap: pretty;
}

/* ── dots：このサイト唯一の視覚言語 ──────── */
.dots{
  display: inline-flex;
  gap: 9px;
  transition: gap .45s cubic-bezier(.3,.9,.3,1.2);
}
.dot{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--dot-idle);
  background: transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.dot--self{ background: var(--self); border-color: var(--self); }
.dot--peer{ background: var(--peer); border-color: var(--peer); }

.dots--both{ gap: 4px; }
.dots--both .dot{
  background: var(--both);
  border-color: var(--both);
  box-shadow: 0 0 22px rgba(255,182,72,.5);
}
.dots--faint .dot{ border-color: rgba(255,255,255,.16); }

.dots--xs{ gap: 4px; }
.dots--xs .dot{ width: 7px; height: 7px; border-width: 1px; }
.dots--sm{ gap: 5px; }
.dots--sm .dot{ width: 9px; height: 9px; border-width: 1px; }
.dots--md .dot{ width: 13px; height: 13px; }
.dots--lg{ gap: 10px; }
.dots--lg .dot{ width: 14px; height: 14px; }

/* ── header ────────────────────────────── */
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
}
/* ロゴはリンクになるが、色はテキストのまま継承させる */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.brand:hover{ color: inherit; }
.brand:hover .dot--self{ box-shadow: 0 0 14px rgba(255,107,129,.5); }
.brand:hover .dot--peer{ box-shadow: 0 0 14px rgba(111,168,255,.5); }
.brand-name{
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .06em;
}
.tag{
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ── hero ──────────────────────────────── */
.hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  padding-top: clamp(72px, 9vw, 112px);
  padding-bottom: clamp(84px, 11vw, 130px);
}
.hero-copy > * + *{ margin-top: 26px; }
.hero-copy .cta-row{ margin-top: 38px; }

.cta-row{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cta{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #f2f3f7;
  color: #0b0d12;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta:hover{
  background: #fff;
  color: #0b0d12;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.cta:active{ transform: translateY(0); }
.cta-note{ font-size: 14px; color: #6f778a; }

/* ── phone ─────────────────────────────── */
.hero-device{ display: flex; justify-content: center; }

.phone{
  position: relative;
  width: 290px;
  height: 400px;
  border-radius: 44px;
  padding: 11px;
  background: #000;
  box-shadow: 0 0 0 1.5px #262b36, 0 40px 90px rgba(0,0,0,.65);
}
.phone-notch{
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 6;
}
.phone-screen{
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 20% 0%, #4a3b6b 0%, transparent 55%),
    radial-gradient(110% 90% at 90% 100%, #1f4a5c 0%, transparent 60%),
    linear-gradient(160deg, #2a2440 0%, #171a2b 60%, #101322 100%);
}
.phone-status{
  display: flex;
  justify-content: space-between;
  padding: 14px 22px 0;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.phone-status-dots{ letter-spacing: .1em; }
.phone-body{ padding: 34px 24px 0; }

/* ── the demo widget ───────────────────── */
.widget{
  position: relative;
  width: 150px; height: 150px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .45s var(--ease), border-color .45s var(--ease), transform .12s ease;
}
.widget:active{ transform: scale(.955); }

.widget .dot{
  width: 34px; height: 34px;
  border-width: 2px;
  border-color: rgba(255,255,255,.4);
}
.widget .dots{ gap: 18px; }

/* 1タップ目：まだ何も送られていない、という最小の合図 */
.widget.is-armed .dot--self{
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 0 0 5px rgba(255,255,255,.09);
}

.widget.is-sent{
  background: rgba(255,107,129,.28);
  border-color: rgba(255,107,129,.55);
}
.widget.is-sent .dot--self{
  background: var(--self);
  border-color: var(--self);
  box-shadow: 0 0 20px rgba(255,107,129,.5);
}
.widget.is-both{
  background: rgba(255,182,72,.32);
  border-color: rgba(255,182,72,.7);
}
.widget.is-both .dots{ gap: 5px; }
.widget.is-both .dot{
  background: var(--both);
  border-color: var(--both);
  box-shadow: 0 0 20px rgba(255,182,72,.5);
}

/* 待っているあいだの、ごく微かな呼吸 */
.widget.is-idle .dot{ animation: idle-breath 7s ease-in-out infinite; }
.widget.is-idle .dot:last-child{ animation-delay: -3.5s; }

@keyframes idle-breath{
  0%, 100%{ border-color: rgba(255,255,255,.4); }
  50%     { border-color: rgba(255,255,255,.62); }
}

/* 送った瞬間に外へ広がる波 */
.ripple{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.ripple.play{ animation: ripple .8s ease-out; }

@keyframes ripple{
  from{ box-shadow: 0 0 0 0 var(--ripple, rgba(255,107,129,.45)); }
  to  { box-shadow: 0 0 0 34px var(--ripple-end, rgba(255,107,129,0)); }
}

.widget-name{
  width: 150px;
  text-align: center;
  margin-top: 9px;
  font-size: 11px;
  color: rgba(255,255,255,.8);
}
.demo-hint{
  margin-top: 30px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
  min-height: 3.2em;
  transition: color .4s var(--ease);
}
.demo-hint.lit{ color: rgba(255,255,255,.78); }

/* ── cards ─────────────────────────────── */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 14px;
  margin-top: 88px;
}
.card{
  background: var(--band);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 32px 26px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color: #2a3140; transform: translateY(-3px); }

.card .dots{ margin-bottom: 22px; }
.card-title{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 9px;
}
.card-text{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* カードのドットは、視界に入ってから順に灯る */
.cards .dot--self,
.cards .dot--peer,
.cards .dots--both .dot{
  background: transparent;
  border-color: var(--dot-idle);
  box-shadow: none;
}
.cards.is-in .dot--self{ background: var(--self); border-color: var(--self); }
.cards.is-in .dot--peer{ background: var(--peer); border-color: var(--peer); }
.cards.is-in .dots--both .dot{
  background: var(--both);
  border-color: var(--both);
  box-shadow: 0 0 18px rgba(255,182,72,.45);
}
.cards.is-in .card:nth-child(1) .dot{ transition-delay: .30s; }
.cards.is-in .card:nth-child(2) .dot{ transition-delay: .45s; }
.cards.is-in .card:nth-child(3) .dot{ transition-delay: .60s; }
.cards.is-in .card:nth-child(3) .dots{ transition-delay: .60s; }

/* ── split sections ────────────────────── */
.split{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.split--even{
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split-lead > * + *,
.split > div > * + *{ margin-top: 26px; }

.spec{
  display: grid;
  grid-template-columns: 1.2em 1fr;
  column-gap: 20px;
  row-gap: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.spec:last-child{ border-bottom: 0; }
.spec::before{
  content: "—";
  grid-column: 1;
  grid-row: 1;
  color: #3f4657;
  font-size: 15px;
  line-height: 1.5;
}
/* 見出しも本文も2列目に置く。指定しないと本文が1列目に落ちる */
.spec-title{
  grid-column: 2;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 5px;
}
.spec-text{
  grid-column: 2;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── tip card ──────────────────────────── */
.tip-card{
  border: 1px solid #1e2330;
  border-radius: 18px;
  padding: 38px 34px;
  background: #0f1219;
}
.tip-title{
  font-size: 16.5px;
  font-weight: 500;
  color: #c8cedb;
  margin-bottom: 8px;
}
.tip-sub{
  font-size: 14.5px;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.tip-amounts{ display: flex; gap: 10px; }
.tip-amounts span{
  flex: 1;
  text-align: center;
  padding: 13px 0;
  border-radius: 12px;
  background: #1a1f2a;
  border: 1px solid #242a37;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.tip-note{
  font-size: 12.5px;
  color: var(--ink-5);
  margin-top: 20px;
}

/* ── close ─────────────────────────────── */
.close{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  padding-top: clamp(90px, 11vw, 130px);
}
.close .display--lg{ max-width: 20em; }
.close .cta{ margin-top: 4px; }
.fineprint{
  font-size: 13.5px;
  color: var(--ink-4);
  line-height: 1.7;
}

.dots--breathing .dot{ animation: breathe 4.5s ease-in-out infinite; }
.dots--breathing .dot:last-child{ animation-delay: -2.2s; }

@keyframes breathe{
  0%, 100%{ box-shadow: 0 0 18px rgba(255,182,72,.4); }
  50%     { box-shadow: 0 0 30px rgba(255,182,72,.72); }
}

/* ══════════════════════════════════════════
   法的ページ（privacy / terms / support）
   ══════════════════════════════════════════ */
.wrap.doc{
  max-width: 46rem;
  padding-top: clamp(52px, 8vw, 84px);
  padding-bottom: clamp(72px, 10vw, 110px);
}

.doc-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.doc-meta{
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-4);
}

.doc-summary{
  margin-top: 40px;
  padding: 26px 28px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--band);
}
.doc-summary p{
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.doc-section{
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
.doc-section h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.doc-section h3{
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 34px;
  margin-bottom: 10px;
}
.doc-section h3:first-of-type{ margin-top: 26px; }

.doc-section p{
  font-size: 15.5px;
  line-height: 1.85;
  color: #9aa2b4;
  text-wrap: pretty;
}
.doc-section p + p{ margin-top: 14px; }
.doc-section strong{ color: var(--ink-2); font-weight: 500; }
.doc-section a{ text-decoration: underline; text-underline-offset: 3px; }

.doc-list{
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
}
.doc-list li{
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #9aa2b4;
  text-wrap: pretty;
}
.doc-list li + li{ margin-top: 10px; }
.doc-list li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: #3f4657;
}

/* 同意の節だけは、視覚的にも他と区別する */
.doc-section--mark{
  border-top: 0;
  margin-top: 44px;
  padding: 30px 0 4px 26px;
  border-left: 2px solid var(--self);
}
.doc-section--mark h2{ color: var(--ink); }

/* ── footer ────────────────────────────── */
.footer{ border-top: 1px solid var(--rule); }
.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 34px;
  padding-bottom: 34px;
  font-size: 13px;
  color: var(--ink-4);
}
.footer-links{ display: flex; gap: 24px; }
.footer-links a{ color: var(--ink-4); }
.footer-links a:hover{ color: var(--ink-2); }
.copyright{ font-size: 12.5px; color: var(--ink-5); }

/* ══════════════════════════════════════════
   motion
   ══════════════════════════════════════════ */
[data-enter]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.hero-device[data-enter]{ transform: translateY(22px) scale(.985); }
[data-enter].is-in{ opacity: 1; transform: none; }

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.reveal.is-in{ opacity: 1; transform: none; }

/* リストは1行ずつ立ち上がる */
.specs .spec{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.specs.is-in .spec{ opacity: 1; transform: none; }
.specs.is-in .spec:nth-child(1){ transition-delay: .06s; }
.specs.is-in .spec:nth-child(2){ transition-delay: .14s; }
.specs.is-in .spec:nth-child(3){ transition-delay: .22s; }
.specs.is-in .spec:nth-child(4){ transition-delay: .30s; }
.specs.is-in .spec:nth-child(5){ transition-delay: .38s; }
.specs.is-in .spec:nth-child(6){ transition-delay: .46s; }

.cards .card{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease),
              border-color .4s var(--ease);
}
.cards.is-in .card{ opacity: 1; transform: none; }
.cards.is-in .card:nth-child(1){ transition-delay: .04s; }
.cards.is-in .card:nth-child(2){ transition-delay: .12s; }
.cards.is-in .card:nth-child(3){ transition-delay: .20s; }
.cards.is-in .card:nth-child(4){ transition-delay: .28s; }

/* ══════════════════════════════════════════
   responsive
   ══════════════════════════════════════════ */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .split,
  .split--even{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cards{ margin-top: 56px; }
}

@media (max-width: 560px){
  .wrap{ padding-left: 20px; padding-right: 20px; }
  .lede{ font-size: 17.5px; }
  .body{ font-size: 16.5px; }
  .cta-row{ gap: 14px; }
  .cta{ width: 100%; justify-content: center; }
  .cta-note{ width: 100%; }
  .close .cta{ width: auto; }
  .tip-card{ padding: 30px 24px; }
  .cards{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .doc-summary{ padding: 22px 20px; }
  .doc-section--mark{ padding-left: 18px; }
}

/* ══════════════════════════════════════════
   reduced motion
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  [data-enter], .reveal, .specs .spec, .cards .card{
    opacity: 1 !important;
    transform: none !important;
  }
}