/* Mold Logic Partners — shared styles
   palette and type derived from the business card */

:root{
  --ink:#0B1024;        /* text navy, from the card */
  --deep:#001B41;       /* band navy */
  --deep-2:#00306B;     /* band highlight */
  --cyan:#0C8FBF;       /* wordmark cyan */
  --flow:#10B4E4;       /* bright accent, the wave */
  --paper:#FBFCFD;
  --mist:#E4EAF1;       /* hairlines */
  --slate:#54637E;      /* secondary text */
  --measure:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* --- bilingual switching ------------------------------------------ */
[data-lang="ja"] .en{display:none !important}
[data-lang="en"] .ja{display:none !important}

/* --- type roles ---------------------------------------------------- */
.display{
  font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
}
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
}

/* --- header -------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(251,252,253,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mist);
}
.head-in{
  max-width:var(--measure);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px;
}
.head-logo img{height:30px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--slate);
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--flow)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--cyan)}
.lang{
  display:flex;border:1px solid var(--mist);border-radius:999px;overflow:hidden;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
}
.lang button{
  border:0;background:transparent;color:var(--slate);
  padding:6px 12px;cursor:pointer;font:inherit;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* --- layout -------------------------------------------------------- */
main{display:block}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}
.band{padding:84px 0;border-top:1px solid var(--mist)}
.band:first-of-type{border-top:0}
.band-head{margin-bottom:40px}
.band-head h2{margin:8px 0 0;font-size:clamp(1.5rem,3vw,2rem)}
.lead{color:var(--slate);max-width:64ch;margin:14px 0 0}

/* --- hero ---------------------------------------------------------- */
.hero{
  background:linear-gradient(155deg,var(--deep) 0%,#00224F 55%,var(--deep-2) 100%);
  color:#fff;overflow:hidden;
}
.hero-in{
  max-width:var(--measure);margin:0 auto;padding:78px 24px 66px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero h1{
  margin:14px 0 0;font-size:clamp(1.85rem,4.2vw,2.9rem);letter-spacing:.005em;
}
.hero p{color:#C7D6E8;max-width:46ch}
.hero .mono{color:var(--flow)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:13px 26px;border-radius:2px;transition:transform .15s ease,background .15s ease;
}
.btn-primary{background:var(--flow);color:#00243F}
.btn-primary:hover{background:#3CC8F0;transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--flow);color:var(--flow)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--deep-2);transform:translateY(-1px)}

/* --- hero figure: filling isochrones ------------------------------- */
.fill-fig{width:100%;height:auto}
.fill-fig .cavity{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.45);stroke-width:2}
.fill-fig .iso{fill:none;stroke:var(--flow);stroke-width:2.4;opacity:0}
.fill-fig .gate{fill:var(--flow)}
.fill-fig .iso{animation:sweep 7s linear infinite}
.fill-fig .iso:nth-child(1){animation-delay:0s}
.fill-fig .iso:nth-child(2){animation-delay:.22s}
.fill-fig .iso:nth-child(3){animation-delay:.44s}
.fill-fig .iso:nth-child(4){animation-delay:.66s}
.fill-fig .iso:nth-child(5){animation-delay:.88s}
.fill-fig .iso:nth-child(6){animation-delay:1.1s}
.fill-fig .iso:nth-child(7){animation-delay:1.32s}
.fill-fig .iso:nth-child(8){animation-delay:1.54s}
.fill-fig .iso:nth-child(9){animation-delay:1.76s}
.fill-fig .iso:nth-child(10){animation-delay:1.98s}
.fill-fig .iso:nth-child(11){animation-delay:2.2s}
.fill-fig .iso:nth-child(12){animation-delay:2.42s}
@keyframes sweep{
  0%{opacity:0}
  6%{opacity:1}
  40%{opacity:.55}
  86%{opacity:.28}
  100%{opacity:0}
}
.fig-note{
  margin-top:14px;color:#8FA7C4;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
}

/* --- spec strip ---------------------------------------------------- */
.specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--mist);border:1px solid var(--mist);
}
.spec{background:var(--paper);padding:26px 24px}
.spec dt{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 8px}
.spec dd{margin:0;font-size:.95rem;line-height:1.7}

/* --- cards --------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card{
  border:1px solid var(--mist);border-top:3px solid var(--cyan);
  background:#fff;padding:30px 28px;
}
.card h3{margin:10px 0 10px;font-size:1.12rem}
.card p{margin:0;color:var(--slate);font-size:.95rem}
.card ul{margin:14px 0 0;padding-left:1.1em;color:var(--slate);font-size:.92rem}
.card li{margin:4px 0}

/* --- process steps (a real sequence, so it is numbered) ------------ */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  counter-increment:step;display:grid;grid-template-columns:88px 1fr;gap:24px;
  padding:24px 0;border-top:1px solid var(--mist);
}
.step:last-child{border-bottom:1px solid var(--mist)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:1.05rem;color:var(--flow);
  letter-spacing:.06em;padding-top:2px;
}
.step h3{margin:0 0 6px;font-size:1.02rem}
.step p{margin:0;color:var(--slate);font-size:.93rem}

/* --- timeline ------------------------------------------------------ */
.tl{border-left:2px solid var(--mist);margin:0;padding:0 0 0 28px}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;position:relative}
.tl-row::before{
  content:"";position:absolute;left:-35px;top:26px;width:9px;height:9px;
  background:var(--cyan);border-radius:50%;
}
.tl-row dt{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--cyan);letter-spacing:.06em}
.tl-row dd{margin:0;font-size:.95rem}

/* --- contact ------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px}
.dl-contact{margin:0}
.dl-contact div{padding:18px 0;border-bottom:1px solid var(--mist)}
.dl-contact dt{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.dl-contact dd{margin:0;font-size:1.02rem}
.dl-contact a{text-decoration:none;border-bottom:1px solid var(--mist)}
.dl-contact a:hover{border-bottom-color:var(--flow)}
.checklist{margin:0;padding-left:1.15em;color:var(--slate)}
.checklist li{margin:8px 0}

/* --- footer -------------------------------------------------------- */
.site-foot{border-top:1px solid var(--mist);background:#fff;margin-top:0}
.foot-in{
  max-width:var(--measure);margin:0 auto;padding:52px 24px 40px;
  display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;
}
.foot-in img{width:230px}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:18px}
.foot-links a{text-decoration:none;font-size:.9rem;color:var(--slate)}
.foot-links a:hover{color:var(--ink)}
.foot-meta{color:var(--slate);font-size:.86rem;line-height:1.9;margin:0}
.copy{
  border-top:1px solid var(--mist);margin-top:34px;padding-top:18px;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;color:var(--slate);
}

/* --- responsive ---------------------------------------------------- */
@media (max-width:880px){
  .hero-in{grid-template-columns:1fr;gap:34px;padding:56px 24px 52px}
  .grid-2,.contact-grid,.foot-in{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .band{padding:60px 0}
  .head-in{gap:14px;flex-wrap:wrap}
  .nav{gap:16px;width:100%;order:3;margin-left:0}
  .tl-row,.step{grid-template-columns:1fr;gap:4px}
  .step::before{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fill-fig .iso{animation:none;opacity:.75}
  .btn{transition:none}
}

:focus-visible{outline:2px solid var(--flow);outline-offset:3px}