/* ==============================================================
   Mitsukeru LP — production stylesheet
   self-contained, no external dependencies except Google Fonts.
   ============================================================== */

:root{
  --c-navy:        #1F4E79;
  --c-navy-dark:   #143659;
  --c-navy-ink:    #0d2a45;
  --c-cyan:        #00BCD4;
  --c-cyan-dark:   #009bb0;
  --c-cyan-deep:   #063e4f;

  --c-ink:         #0f172a;
  --c-ink-soft:    #334155;
  --c-muted:       #64748b;
  --c-muted-2:     #94a3b8;

  --c-line:        #e2e8f0;
  --c-line-soft:   #eef2f7;
  --c-line-strong: #cbd5e1;

  --c-bg:          #ffffff;
  --c-bg-soft:     #f7f9fc;
  --c-bg-soft-2:   #eef2f7;
  --c-bg-warm:     #fffbef;
  --c-bg-tint-cy:  #f0fbfd;
  --c-bg-tint-nv:  #f4f7fb;

  --c-alert:       #d4392f;
  --c-alert-soft:  #fde8e6;
  --c-warn:        #c08a1c;
  --c-success:     #15803d;

  /* partner accents */
  --c-p1-bar:      #db6a5a;
  --c-p1-tint:     #fff1ee;
  --c-p2-bar:      #2563eb;
  --c-p2-tint:     #eff6ff;
  --c-p3-bar:      #16a34a;
  --c-p3-tint:     #f0fdf4;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px -8px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.08);
  --shadow-xl: 0 24px 48px -12px rgba(15,23,42,.22), 0 8px 16px -6px rgba(15,23,42,.10);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- base reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-jp);
  font-size:16px;
  line-height:1.8;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings: "palt" 1;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul, ol { margin:0; padding:0; list-style:none; }
p { margin:0; }
strong, b { font-weight:700; }

/* ---------- layout primitives ---------- */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.container-narrow{ max-width:880px; }

.sec{ padding:104px 0; position:relative; }
.sec-soft{ background:var(--c-bg-soft); }

.sec-head{ margin-bottom:48px; }
.sec-no{
  display:inline-block;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-cyan-dark);
  margin-bottom:14px;
  padding:4px 12px;
  background:var(--c-bg-tint-cy);
  border-radius:99px;
}

.h1{
  font-family:var(--font-jp);
  font-size:54px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 22px;
  color:var(--c-ink);
}
/* H1 — 2-line typographic split (sub line + main line) */
.h1-pre{
  display:block;
  font-family:var(--font-jp);
  font-size:24px;
  font-weight:700;
  line-height:1.5;
  color:var(--c-ink-soft);
  margin-bottom:8px;
  letter-spacing:0;
}
.h1-pre .hl-soft{
  background: linear-gradient(180deg, transparent 60%, rgba(0,188,212,.18) 60%);
  padding:0 2px;
}
.h1-main{
  display:block;
  font-size:54px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
.accent-underline{
  color:var(--c-navy);
  position:relative;
  white-space:nowrap;
}
.accent-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:6px;
  background:var(--c-cyan);
  opacity:.55;
  border-radius:3px;
}

.h2{
  font-family:var(--font-jp);
  font-size:36px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.005em;
  margin:0 0 14px;
  color:var(--c-ink);
}
.h3{
  font-family:var(--font-jp);
  font-size:22px;
  font-weight:700;
  line-height:1.4;
  margin:0 0 12px;
  color:var(--c-ink);
}

.lead{
  font-size:17px;
  line-height:1.85;
  color:var(--c-ink-soft);
  margin:0;
}
.muted { color:var(--c-muted); }
small, .small{ font-size:14px; line-height:1.6; color:var(--c-muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-jp);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  padding:11px 22px;
  border:1.5px solid transparent;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-lg{ padding:14px 28px; font-size:16px; }
.btn-primary{
  background:var(--c-navy); color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.16);
}
.btn-primary:hover{ background:var(--c-navy-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-cyan{
  background:var(--c-cyan); color:var(--c-cyan-deep);
  border-color:var(--c-cyan);
  box-shadow:0 1px 2px rgba(8,160,184,.2);
}
.btn-cyan:hover{ background:#22cee5; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline{
  background:#fff; color:var(--c-navy); border-color:var(--c-line-strong);
}
.btn-outline:hover{ background:var(--c-bg-soft); border-color:var(--c-navy); }
.btn-ghost{
  background:transparent; color:var(--c-ink-soft);
}
.btn-ghost:hover{ color:var(--c-navy); background:var(--c-bg-soft); }
.btn-ghost-light{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* badge attached to button */
.btn-with-badge{ padding-left:14px; }
.btn-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-alert);
  color:#fff;
  font-family:var(--font-en);
  font-size:10.5px; font-weight:800;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:4px;
  margin-right:4px;
  box-shadow:0 2px 4px rgba(212,57,47,.25);
}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--c-line-soft);
}
.hdr-inner{
  display:flex; align-items:center; gap:32px;
  height:68px;
}
.brand{
  display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--font-jp);
}
.brand-mark{ width:28px; height:28px; flex:none; align-self:center; }
.brand-name{ font-size:22px; font-weight:700; color:var(--c-navy); letter-spacing:.02em; }
.brand-sub{ font-size:12px; color:var(--c-muted); font-weight:500; }

.hdr-nav{ display:flex; gap:28px; margin-left:24px; }
.hdr-nav a{
  font-size:14.5px; font-weight:500; color:var(--c-ink-soft);
  padding:8px 0; position:relative;
}
.hdr-nav a:hover{ color:var(--c-navy); }
.hdr-cta{ display:flex; gap:10px; margin-left:auto; }
.hdr-cta .btn{ padding:8px 16px; font-size:14px; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:80px 0 0;
  background:#fff;
  overflow:hidden;
}
.hero-bg-grid{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 1100px 600px at 12% 8%, rgba(0,188,212,.07), transparent 70%),
    radial-gradient(ellipse 900px 500px at 90% 80%, rgba(31,78,121,.07), transparent 60%),
    linear-gradient(180deg, rgba(247,249,252,0) 0%, rgba(247,249,252,1) 100%);
  pointer-events:none;
  z-index:0;
}
.hero-bg-grid::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.25fr 0.85fr; gap:56px;
  align-items:start;
  padding-top:24px; padding-bottom:88px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600;
  color:var(--c-cyan-dark);
  background:var(--c-bg-tint-cy);
  border:1px solid #c8eef3;
  border-radius:99px;
  padding:5px 14px;
  margin-bottom:24px;
  letter-spacing:.06em;
}
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 0 4px rgba(0,188,212,.18);
}

.hero-bullets{
  display:flex; flex-direction:column; gap:14px;
  margin:28px 0 32px;
}
.hero-bullets li{
  display:flex; align-items:center; gap:14px;
  font-size:15.5px;
}
.bullet-num{
  flex:none;
  width:36px; height:36px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--c-line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en);
  font-weight:700;
  font-size:13px;
  color:var(--c-navy);
  letter-spacing:.04em;
}

.hero-cta{
  display:flex; gap:12px; flex-wrap:wrap;
}

/* HERO — Dashboard mock */
.hero-mock{
  background:#fff;
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--c-line);
  overflow:hidden;
  transform: translateY(72px) scale(.92);
  transform-origin: top right;
  position:relative;
}
.hero-mock::before{
  /* subtle reflection / highlight */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%);
  pointer-events:none;
  border-radius:inherit;
}
.hm-chrome{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:#f5f7fa;
  border-bottom:1px solid var(--c-line);
}
.hm-dot{
  width:11px; height:11px; border-radius:50%;
  background:#d6dde6;
}
.hm-dot:nth-child(1){ background:#ff5f57; }
.hm-dot:nth-child(2){ background:#febc2e; }
.hm-dot:nth-child(3){ background:#28c840; }
.hm-url{
  margin-left:14px;
  font-family:var(--font-en);
  font-size:12px;
  color:var(--c-muted);
  background:#fff;
  padding:4px 12px;
  border-radius:6px;
  border:1px solid var(--c-line);
  flex:1;
}
.hm-body{ padding:22px 24px 20px; }
.hm-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:16px;
}
.hm-eyebrow{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-muted); font-weight:600;
  display:block; margin-bottom:2px;
}
.hm-title{ font-size:15px; color:var(--c-ink); }
.hm-badge{
  font-family:var(--font-en);
  font-size:10px; font-weight:700;
  letter-spacing:.15em;
  background:var(--c-bg-warm);
  color:var(--c-warn);
  border:1px solid #f3d989;
  padding:3px 9px;
  border-radius:4px;
}

.hm-kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-bottom:16px;
}
.hm-kpi{
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.hm-kpi small{ font-size:11px; }
.hm-num{
  font-family:var(--font-en);
  font-size:24px; font-weight:800;
  color:var(--c-navy);
  line-height:1.1;
  letter-spacing:-.01em;
}
.hm-unit{
  font-family:var(--font-jp);
  font-size:13px; font-weight:600;
  color:var(--c-muted);
  margin-left:2px;
}
.hm-kpi-alert{
  background:var(--c-alert-soft);
  border-color:#f5c2bd;
}
.hm-kpi-alert .hm-num{ color:var(--c-alert); }

.hm-chart{
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:10px 12px 6px;
  margin-bottom:14px;
}
.hm-chart small{ font-size:11px; }
.hm-spark{ width:100%; height:64px; margin-top:4px; }

.hm-rows{ display:flex; flex-direction:column; gap:6px; }
.hm-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:8px;
  font-size:12.5px;
}
.hm-row-alert{ background:var(--c-alert-soft); border-color:#f5c2bd; }
.hm-row-text{ flex:1; color:var(--c-ink); line-height:1.4; }
.hm-row small{ font-size:11px; color:var(--c-muted); white-space:nowrap; }
.hm-sev{
  font-family:var(--font-en);
  font-size:10px; font-weight:700;
  letter-spacing:.1em;
  padding:2px 6px;
  border-radius:3px;
  flex:none;
}
.hm-sev-crit{ background:var(--c-alert); color:#fff; }
.hm-sev-high{ background:#e87a3e; color:#fff; }
.hm-row-more{
  font-size:11px; color:var(--c-muted-2);
  text-align:center; padding:6px 0;
}

/* proof bar (below hero, inside hero section) */
.proof{
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  margin:-44px auto 0;
  padding:6px 0;
  position:relative; z-index:2;
  box-shadow:var(--shadow-md);
}
.proof-item{
  text-align:center; padding:22px 16px;
  border-right:1px solid var(--c-line-soft);
}
.proof-item:last-child{ border-right:none; }
.proof-num{
  font-family:var(--font-en);
  font-size:38px; font-weight:800;
  color:var(--c-navy);
  line-height:1;
  letter-spacing:-.02em;
}
.proof-num small{
  font-family:var(--font-jp);
  font-size:16px; font-weight:600; color:var(--c-muted);
  margin-left:2px;
}
.proof-label{
  font-size:12px; color:var(--c-muted);
  margin-top:8px;
  letter-spacing:.02em;
}

/* ---------- cyan strip ---------- */
.strip{
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  padding:18px 0;
  border-top:1px solid var(--c-cyan-dark);
  border-bottom:1px solid var(--c-cyan-dark);
}
.strip .container{
  display:flex; align-items:center; gap:10px;
  justify-content:center;
  font-size:15.5px; font-weight:700;
}
.strip span{ font-weight:500; }

/* ---------- ② pain points ---------- */
.pain-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.pain-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pain-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--c-line-strong); }
.pain-card p{
  font-size:14.5px; line-height:1.7;
  color:var(--c-ink-soft);
}
.pain-ic{
  width:24px; height:24px;
  color:var(--c-navy);
  flex:none;
}
.pain-cause{
  background:linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-dark) 60%, var(--c-navy-ink) 100%);
  border:1px solid var(--c-navy-dark);
  color:#fff;
  grid-column:1 / -1;
  padding:28px 32px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.pain-cause::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right, transparent, var(--c-cyan) 50%, transparent);
}
.pain-cause-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  font-size:14px;
  border-right:1px solid rgba(255,255,255,.15);
  padding-right:24px;
  white-space:nowrap;
}
.pain-cause-head svg{ width:28px; height:28px; color:var(--c-cyan); }
.pain-cause strong{ font-size:13px; letter-spacing:.1em; color:var(--c-cyan); text-transform:uppercase; }
.pain-cause p{ color:rgba(255,255,255,.92); font-size:16px; line-height:1.8; margin:0; }
.pain-cause p strong{ color:#fff; font-size:16px; letter-spacing:0; text-transform:none; background:linear-gradient(transparent 60%, rgba(0,188,212,.35) 60%); padding:0 2px; }

/* ---------- ③ solution ---------- */
.arch{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1.3fr auto 1fr;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:30px 32px;
  box-shadow:var(--shadow-sm);
}
.arch-node{ text-align:center; }
.arch-node strong{ display:block; font-size:14.5px; margin-top:8px; }
.arch-node small{ font-size:12px; color:var(--c-muted); }
.arch-node-feature strong{ color:var(--c-cyan-deep); }
.arch-ic{
  width:60px; height:60px;
  border-radius:14px;
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#5a6678;
}
.arch-ic svg{ width:28px; height:28px; }
.arch-ic-soft{ background:var(--c-bg-soft); border:1px solid var(--c-line); }
.arch-ic-navy{ background:var(--c-navy); color:#fff; box-shadow:0 6px 16px -4px rgba(31,78,121,.4); }
.arch-ic-cyan{ background:var(--c-cyan); color:var(--c-cyan-deep); box-shadow:0 6px 16px -4px rgba(0,188,212,.4); }
.arch-link{ font-size:22px; color:var(--c-line-strong); font-weight:600; }
.arch-link-plus{ color:var(--c-cyan); font-size:26px; font-weight:800; }

/* layers diagram */
.layers-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:64px 0 22px;
  gap:24px;
  flex-wrap:wrap;
}
.layers-head .h3{ margin-bottom:0; }
.layers{
  max-width:840px;
  margin:0 auto;
}
.layers-cap{
  background:var(--c-navy);
  color:#fff;
  text-align:center;
  padding:10px 20px;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.layer{
  display:flex; gap:24px; align-items:center;
  padding:28px 32px;
}
.layer-meta{ flex:1; }
.layer-tag{
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  opacity:.7;
  display:block;
  margin-bottom:4px;
}
.layer h4{
  font-family:var(--font-jp);
  font-size:22px; font-weight:700;
  margin:0 0 10px;
  line-height:1.3;
}
.layer p{ font-size:15px; line-height:1.8; margin:0; }

.layer-stat{
  flex:none;
  background:rgba(255,255,255,.14);
  border-radius:var(--radius-md);
  padding:16px 24px;
  text-align:center;
  min-width:140px;
}
.layer-stat small{ font-size:12px; color:inherit; opacity:.85; }
.layer-num{
  font-family:var(--font-en);
  font-size:36px; font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.layer-num small{
  font-family:var(--font-jp);
  font-size:14px; font-weight:600;
  margin-left:2px;
}

.layer-3{
  background:var(--c-navy);
  color:#fff;
  border:1px solid var(--c-navy-dark);
}
.layer-3 h4{ font-size:24px; }

.layer-2{
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  border:1px solid var(--c-cyan-dark);
  border-top:none;
}
.layer-2 .layer-stat{
  background:rgba(0,0,0,.08);
  color:var(--c-cyan-deep);
}

.layer-1{
  background:#f5f3ed;
  color:#6a655a;
  border:1px solid #d9d3c2;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.layer-1 h4{ color:#6a655a; font-size:19px; }
.layer-1 p{ color:#7a7468; }
.layer-stat-muted{
  background:rgba(0,0,0,.05);
  color:#7a7468;
  border:1px dashed #c5beae;
}
.layer-stat-muted small{ font-size:12.5px; line-height:1.5; }

.layers-line{
  position:relative;
  text-align:center;
  padding:36px 0 28px;
  margin:8px 0;
}
.layers-line::before{
  content:""; position:absolute;
  top:50%; left:0; right:0;
  height:2px;
  background:linear-gradient(to right,
    transparent 0%,
    var(--c-cyan) 20%,
    var(--c-alert) 50%,
    var(--c-cyan) 80%,
    transparent 100%);
  opacity:.7;
}
.layers-line::after{
  content:"";
  position:absolute;
  top:calc(50% - 8px); left:50%; transform:translateX(-50%);
  width:140px; height:16px;
  background-image:radial-gradient(circle, var(--c-alert) 2px, transparent 2.5px);
  background-size:14px 100%;
  background-repeat:repeat-x;
  opacity:.35;
}
.layers-line span{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-alert);
  color:#fff;
  padding:8px 24px;
  border-radius:99px;
  font-size:12.5px; font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 6px 16px -4px rgba(212,57,47,.4);
}
.layers-line span::before{
  content:"⚠"; font-size:14px;
}

/* iceberg diagram (3層AI分析) */
.iceberg{
  position:relative;
  max-width:860px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg,
    #eef5f8 0%,
    #e4eef4 28%,
    #86b0c8 31%,
    #2c6e95 40%,
    #1f4e79 60%,
    #143a5e 82%,
    #0e2c49 100%);
  box-shadow:0 18px 44px -16px rgba(15,44,73,.5);
}
.ice-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.ice-above, .ice-below{ position:relative; z-index:1; padding:30px 34px; }
.ice-above{ padding-bottom:14px; }
.ice-below{ padding-top:24px; display:flex; flex-direction:column; gap:16px; }
.ice-zone{
  display:inline-block;
  font-family:var(--font-jp);
  font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:5px 14px; border-radius:99px; margin-bottom:14px;
}
.ice-zone-up{ background:rgba(31,78,121,.10); color:var(--c-navy); }
.ice-zone-down{ background:rgba(255,255,255,.16); color:#fff; }

.ice-waterline{ position:relative; z-index:2; text-align:center; margin:2px 0; }
.ice-waterline::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; background:rgba(255,255,255,.45);
}
.ice-waterline span{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.94);
  color:var(--c-navy);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:6px 18px; border-radius:99px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.3);
}
.ice-waterline span::before{ content:"〜"; font-weight:700; }

.ice-card{ border-radius:var(--radius-md); padding:20px 22px; }
.ice-card .layer-tag{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.14em; font-weight:700;
  opacity:.7; display:block; margin-bottom:4px;
}
.ice-card h4{
  font-family:var(--font-jp);
  font-size:20px; font-weight:700; margin:0 0 8px; line-height:1.3;
}
.ice-card p{ font-size:14px; line-height:1.8; margin:0; }

.ice-card-light{
  background:rgba(255,255,255,.92);
  color:#43525a;
  border:1px solid rgba(31,78,121,.14);
}
.ice-card-light h4{ color:var(--c-navy); }

.ice-card-dark{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ice-card-dark h4{ color:#fff; }
.ice-card-deep{ background:rgba(0,188,212,.13); border-color:rgba(0,188,212,.34); }

.ice-stat{
  display:flex; align-items:baseline; gap:10px;
  margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.16);
}
.ice-stat b{
  font-family:var(--font-en);
  font-size:30px; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--c-cyan);
}
.ice-stat b small{
  font-family:var(--font-jp);
  font-size:14px; font-weight:600; margin-left:2px;
}
.ice-stat span{ font-size:12px; color:rgba(255,255,255,.72); line-height:1.45; }

@media (max-width:640px){
  .ice-above, .ice-below{ padding:24px 18px; }
}

/* features */
.features-head{
  margin:72px 0 20px;
}
.features{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.feat{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:24px 20px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--c-cyan); }
.feat strong{ display:block; font-size:15.5px; margin-bottom:8px; color:var(--c-ink); }
.feat p{ font-size:14px; line-height:1.7; color:var(--c-muted); }
.feat-ic{
  width:32px; height:32px;
  color:var(--c-cyan);
  margin-bottom:14px;
}

/* comparison table */
.cmp-head{ margin:72px 0 20px; }
.cmp-wrap{
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.cmp{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:14.5px;
}
.cmp thead th{
  background:var(--c-bg-soft);
  text-align:left;
  padding:14px 18px;
  font-weight:700;
  font-size:13.5px;
  color:var(--c-ink-soft);
  letter-spacing:.02em;
  border-bottom:1px solid var(--c-line);
}
.cmp .cmp-col-key{
  background:var(--c-bg-tint-cy);
  color:var(--c-navy);
}
.cmp tbody td{
  padding:14px 18px;
  border-top:1px solid var(--c-line-soft);
  line-height:1.7;
  vertical-align:top;
}
.cmp tbody td:first-child{ font-weight:600; color:var(--c-ink); width:36%; }
.cmp tbody tr:nth-child(even) td{ background:var(--c-bg-soft); }
.cmp tbody tr:nth-child(even) td.cmp-col-key{ background:#e9f8fb; }

.ok{ color:var(--c-success); font-weight:700; }
.ng{ color:var(--c-alert); font-weight:700; }
.warn{ color:var(--c-warn); font-weight:700; }

/* ---------- ④ partners ---------- */
.partners{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.partner{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:28px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.partner:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.partner header{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-bottom:18px;
}
.partner h3{ font-size:20px; margin:0; }
.partner-bar{
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
}
.partner-tag{
  font-size:12px;
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  padding:3px 10px;
  border-radius:99px;
  color:var(--c-muted);
  letter-spacing:.04em;
}
.partner dl{ margin:0; }
.partner dt{
  font-size:12px;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--c-muted);
  text-transform:uppercase;
  margin-top:14px;
}
.partner dt:first-child{ margin-top:0; }
.partner dd{
  margin:4px 0 0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--c-ink-soft);
}

.partner-1 .partner-bar{ background:var(--c-p1-bar); }
.partner-2 .partner-bar{ background:var(--c-p2-bar); }
.partner-3 .partner-bar{ background:var(--c-p3-bar); }

/* PoC scenarios */
.poc{ margin-top:64px; }
.poc-head{ margin-bottom:22px; }
.poc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.poc-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:24px 22px 22px;
  position:relative;
  display:flex; flex-direction:column; gap:8px;
}
.poc-card strong{ font-size:15.5px; }
.poc-card p{ font-size:14px; line-height:1.7; color:var(--c-muted); margin:0; }
.poc-letter{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  border-radius:50%;
  font-family:var(--font-en);
  font-weight:800;
  color:var(--c-navy);
  font-size:14px;
  margin-bottom:4px;
}
.poc-card-key{
  background:#fffbef;
  border:1.5px solid var(--c-cyan);
  box-shadow:0 6px 16px -6px rgba(0,188,212,.3);
}
.poc-card-key .poc-letter{
  background:var(--c-cyan);
  border-color:var(--c-cyan);
  color:var(--c-cyan-deep);
}
.poc-key-flag{
  position:absolute; top:-12px; left:18px;
  background:var(--c-cyan); color:var(--c-cyan-deep);
  font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:4px 12px;
  border-radius:99px;
  box-shadow:0 2px 8px -2px rgba(0,188,212,.5);
}

/* ---------- ⑤ steps ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:18px;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  top:24px; left:6%; right:6%;
  height:2px;
  background:repeating-linear-gradient(to right, var(--c-line-strong) 0 6px, transparent 6px 12px);
  z-index:0;
}
.step{
  position:relative; z-index:1;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:34px 18px 22px;
  text-align:center;
}
.step-num{
  position:absolute;
  top:-16px; left:50%; transform:translateX(-50%);
  width:34px; height:34px;
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:800;
  font-size:15px;
  box-shadow:0 4px 10px -2px rgba(0,188,212,.4);
  border:2px solid #fff;
}
.step strong{ display:block; margin-bottom:4px; font-size:15.5px; }
.step small{ font-size:12.5px; }

/* support */
.support{ margin-top:80px; }
.support-head{ margin-bottom:22px; }
.support-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.support-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:28px 24px;
  text-align:center;
}
.support-card strong{ display:block; margin:8px 0 8px; font-size:15.5px; }
.support-card p{ font-size:14px; line-height:1.75; color:var(--c-muted); }
.support-ic{
  width:48px; height:48px;
  background:var(--c-bg-tint-nv);
  color:var(--c-navy);
  border-radius:12px;
  margin:0 auto 4px;
  display:flex; align-items:center; justify-content:center;
}
.support-ic svg{ width:22px; height:22px; }

/* ---------- ⑥ case studies ---------- */
.case{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:32px 36px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}
.case:last-child{ margin-bottom:0; }
.case-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.case-head h3{ margin:6px 0 4px; font-size:22px; }
.case-tag{
  font-family:var(--font-en);
  font-size:11px; font-weight:800; letter-spacing:.16em;
  color:var(--c-navy);
  background:var(--c-bg-tint-nv);
  padding:3px 10px;
  border-radius:4px;
  display:inline-block;
}
.case-tag-02{ background:#fff5e8; color:#a85a18; }
.case-period{
  font-size:12px;
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  padding:5px 12px;
  border-radius:99px;
  color:var(--c-ink-soft);
  font-weight:600;
  white-space:nowrap;
}
.case-kpis{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.case-kpi{
  background:var(--c-bg-soft);
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:18px 18px 14px;
  text-align:center;
}
.case-kpi-alert{
  background:var(--c-alert-soft);
  border-color:#f5c2bd;
}
.case-num{
  font-family:var(--font-en);
  font-size:42px; font-weight:800;
  line-height:1;
  color:var(--c-navy);
  letter-spacing:-.02em;
}
.case-num small{
  font-family:var(--font-jp);
  font-size:16px; font-weight:600;
  color:var(--c-muted);
  margin-left:3px;
}
.case-kpi-alert .case-num{ color:var(--c-alert); }
.case-kpi-alert .case-num small{ color:#9b3329; }
.case-label{
  font-size:12.5px;
  color:var(--c-muted);
  margin-top:8px;
}
.case-foot{
  margin-top:18px;
  font-size:14px;
  color:var(--c-ink-soft);
  padding-top:18px;
  border-top:1px solid var(--c-line-soft);
}

/* ---------- ⑦ plans ---------- */
.plans{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:20px;
  align-items:stretch;
}
.plan{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:36px 32px 32px;
  position:relative;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.plan-poc{
  border:2px solid var(--c-cyan);
  background:linear-gradient(180deg, #ffffff 0%, #f0fbfd 100%);
  box-shadow:0 12px 28px -10px rgba(0,188,212,.25), var(--shadow-md);
}
.plan-continue{
  background:linear-gradient(180deg, #ffffff 0%, var(--c-bg-tint-nv) 100%);
}
.plan-ribbon{
  position:absolute; top:-14px; left:24px;
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  padding:5px 14px;
  border-radius:99px;
  box-shadow:0 4px 10px -2px rgba(0,188,212,.45);
}
.plan-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px;
}
.plan-head h3{ font-size:24px; margin:0; }
.plan-tag{
  font-size:12px;
  background:#fff;
  border:1px solid var(--c-line);
  padding:3px 12px;
  border-radius:99px;
  color:var(--c-muted);
}
.plan-list{
  display:flex; flex-direction:column; gap:10px;
  font-size:14.5px;
  flex:1;
  margin-bottom:18px;
}
.plan-list li{ display:flex; gap:10px; align-items:flex-start; line-height:1.7; }
.check{
  flex:none;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--c-cyan);
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:5px;
  position:relative;
}
.check::after{
  content:"";
  display:block;
  width:5px; height:9px;
  border:solid var(--c-cyan-deep);
  border-width:0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.plan-continue .check{ background:var(--c-navy); }
.plan-continue .check::after{ border-color:#fff; }
.plan-note{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:13px;
  line-height:1.7;
}
.plan-note strong{ display:block; margin-bottom:2px; color:var(--c-navy); }
.plan-note span{ color:var(--c-ink-soft); }
.plan-note-light{ background:var(--c-bg-soft); }
.plan-enterprise-note{
  margin-top:12px;
  padding:8px 12px;
  background:var(--c-bg-soft);
  border-left:3px solid var(--c-line);
  border-radius:4px;
  font-size:12.5px;
  color:var(--c-muted);
}

.plan-bridge{
  align-self:center;
  font-size:36px;
  color:var(--c-cyan);
  font-weight:300;
  padding:0 8px;
}

.plans-foot{
  text-align:center;
  font-size:13px;
  color:var(--c-muted);
  margin-top:24px;
}

/* ---------- ⑧ FAQ ---------- */
.faqs{
  display:flex; flex-direction:column; gap:10px;
}
.faq{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq summary{
  font-size:16px;
  font-weight:700;
  padding:18px 22px;
  cursor:pointer;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
  color:var(--c-ink);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg);
  transition:transform .2s;
  flex:none;
  margin-top:-4px;
}
.faq[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.faq-a{
  padding:0 22px 20px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--c-ink-soft);
  border-top:1px solid var(--c-line-soft);
  padding-top:16px;
}

/* ---------- CTA band ---------- */
.cta{
  position:relative;
  background:var(--c-navy);
  color:#fff;
  padding:88px 0;
  overflow:hidden;
}
.cta-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 300px at 20% 30%, rgba(0,188,212,.16), transparent 70%),
    radial-gradient(ellipse 700px 400px at 90% 70%, rgba(0,188,212,.08), transparent 70%);
  pointer-events:none;
}
.cta-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
}
.cta-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
}
.cta-title{ color:#fff; font-size:36px; }
.cta-lead{ color:rgba(255,255,255,.85); font-size:17px; line-height:1.85; margin-top:8px; }
.cta-buttons{ display:flex; flex-direction:column; gap:12px; }

/* ---------- Footer ---------- */
.ftr{
  background:var(--c-navy-ink);
  color:rgba(255,255,255,.7);
  padding:48px 0 32px;
}
.ftr-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px 48px;
  align-items:start;
}
.ftr-brand{
  display:flex; gap:12px; align-items:center;
}
.ftr-brand .brand-mark{ width:36px; height:36px; }
.ftr-brand strong{ color:#fff; font-size:18px; display:block; }
.ftr-brand small{ color:rgba(255,255,255,.5); font-size:12px; }
.ftr-nav{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:14px;
  justify-content:flex-end;
}
.ftr-nav a{ color:rgba(255,255,255,.65); transition:color .15s; }
.ftr-nav a:hover{ color:#fff; }
.ftr-copy{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:18px;
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,.45);
}

/* ---------- 1.5 trustbar ---------- */
.trustbar{
  background:#fff;
  padding:28px 0 26px;
  border-bottom:1px solid var(--c-line);
}
.tb-eyebrow{
  text-align:center;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin:0 0 18px;
}
.tb-list{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px 28px;
  font-size:14px;
  color:var(--c-ink-soft);
  font-weight:600;
}
.tb-item{
  display:inline-flex; align-items:center; gap:8px;
}
.tb-tag{
  display:inline-block;
  background:var(--c-navy);
  color:#fff;
  font-family:var(--font-en);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  padding:2px 7px;
  border-radius:3px;
  text-transform:uppercase;
}

/* ---------- ②- urgency (dark accent) ---------- */
.urgency{
  position:relative;
  background:var(--c-navy-ink);
  color:#fff;
  overflow:hidden;
}
.urgency-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 700px 360px at 18% 12%, rgba(0,188,212,.18), transparent 70%),
    radial-gradient(ellipse 600px 320px at 88% 88%, rgba(31,78,121,.5), transparent 70%);
  pointer-events:none;
}
.urgency-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, #000 30%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, #000 30%, transparent 90%);
}
.urgency > .container{ position:relative; z-index:1; }

.sec-head-light .sec-no-light{
  background:rgba(0,188,212,.14);
  color:var(--c-cyan);
  border:1px solid rgba(0,188,212,.3);
}
.h2-light{ color:#fff; }
.lead-light{ color:rgba(255,255,255,.78); }

.urg-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
  margin-top:8px;
  counter-reset:urg;
}
.urg-card{
  counter-increment:urg;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:30px 28px;
  position:relative;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.urg-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,188,212,.4);
  background:rgba(255,255,255,.07);
}
.urg-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-jp);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  margin-bottom:18px;
}
.urg-label::before{
  content:counter(urg, decimal-leading-zero);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px; height:26px;
  font-family:var(--font-en);
  font-size:13px; font-weight:800;
  letter-spacing:0;
  color:var(--c-cyan-deep);
  background:var(--c-cyan);
  border-radius:6px;
}
.urg-title{
  font-family:var(--font-jp);
  font-size:18px; font-weight:700;
  margin:0 0 10px;
  color:#fff;
  line-height:1.4;
}
.urg-card p{
  font-size:14px; line-height:1.85;
  color:rgba(255,255,255,.75);
}
.urg-card p strong{ color:#fff; }

.urg-card-key{
  background:linear-gradient(180deg, rgba(0,188,212,.12), rgba(0,188,212,.03));
  border-color:rgba(0,188,212,.35);
  box-shadow:0 12px 32px -8px rgba(0,188,212,.2);
}
.urg-flag{
  position:absolute; top:-12px; left:24px;
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:4px 12px;
  border-radius:99px;
  box-shadow:0 4px 10px -2px rgba(0,188,212,.5);
}

/* ---------- ⑤- voice ---------- */
.voice-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.voice-card{
  position:relative;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:36px 36px 28px;
  margin:0;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.voice-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.voice-mark{
  position:absolute; top:12px; left:24px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:84px;
  line-height:1;
  color:var(--c-cyan);
  opacity:.22;
  font-weight:700;
  pointer-events:none;
}
.voice-quote{
  position:relative; z-index:1;
  font-size:16px;
  line-height:1.9;
  color:var(--c-ink);
  margin:0 0 24px;
}
.voice-quote strong{ color:var(--c-navy); }
.voice-author{
  display:flex; align-items:center; gap:14px;
  padding-top:18px;
  border-top:1px solid var(--c-line-soft);
}
.voice-avatar{
  flex:none;
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--c-navy) 0%, var(--c-cyan) 100%);
  color:#fff;
  font-family:var(--font-en);
  font-weight:800;
  font-size:14px;
  letter-spacing:.05em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -2px rgba(31,78,121,.3);
}
.voice-avatar-2{
  background:linear-gradient(135deg, var(--c-cyan-dark) 0%, var(--c-p2-bar) 100%);
}
.voice-meta strong{ display:block; font-size:14.5px; color:var(--c-ink); }
.voice-meta small{ font-size:12.5px; color:var(--c-muted); }
.voice-foot{
  text-align:center;
  margin-top:24px;
  font-size:13px;
}

/* ---------- CTA bullets + form ---------- */
.cta-bullets{
  margin-top:18px;
  display:flex; flex-direction:column; gap:8px;
}
.cta-bullets li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  color:rgba(255,255,255,.78);
}
.cta-bullets li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 0 3px rgba(0,188,212,.2);
}

.cta-form{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:24px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
}
.cf-row{ margin-bottom:14px; }
.cf-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cf-row-2 .cf-label{ margin:0; }
.cf-label{ display:block; }
.cf-label > span{
  display:block;
  font-size:12px; font-weight:700;
  letter-spacing:.06em;
  color:rgba(255,255,255,.6);
  margin-bottom:6px;
}
.cf-label input{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  padding:12px 14px;
  border-radius:8px;
  font-family:var(--font-jp);
  font-size:14.5px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.cf-label input::placeholder{ color:rgba(255,255,255,.32); }
.cf-label input:focus{
  outline:none;
  border-color:var(--c-cyan);
  background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(0,188,212,.18);
}
.cf-submit{ width:100%; margin-top:6px; }
.cf-note{
  display:block;
  text-align:center;
  margin-top:12px;
  font-size:12px;
  color:rgba(255,255,255,.5);
}
.cf-note a{ color:rgba(255,255,255,.7); text-decoration:underline; }
.cf-sent-msg{
  display:none;
  margin-top:14px;
  padding:12px 16px;
  background:rgba(0,188,212,.14);
  border:1px solid rgba(0,188,212,.3);
  border-radius:8px;
  color:#fff;
  font-size:13.5px;
  text-align:center;
}
.cta-form.is-sent .cf-sent-msg{ display:block; }
.cta-form.is-sent .cf-submit{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.5); cursor:not-allowed; }

/* ---------- floating CTA ---------- */
.float-cta{
  position:fixed;
  right:24px; bottom:24px;
  z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--c-navy);
  color:#fff;
  padding:14px 22px;
  border-radius:99px;
  font-family:var(--font-jp);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,188,212,.3), 0 0 24px rgba(0,188,212,.25);
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.float-cta.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.float-cta:hover{
  background:var(--c-navy-dark);
  box-shadow:var(--shadow-xl), 0 0 0 1px var(--c-cyan), 0 0 32px rgba(0,188,212,.4);
  transform:translateY(-2px);
}
.fc-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  background:var(--c-cyan);
  color:var(--c-cyan-deep);
  border-radius:50%;
  font-weight:800;
  font-size:14px;
}
.fc-text strong{ color:var(--c-cyan); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-anim]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  [data-anim].in-view{
    opacity:1;
    transform:none;
  }
  [data-anim-delay="100"]{ transition-delay:.08s; }
  [data-anim-delay="200"]{ transition-delay:.16s; }
  [data-anim-delay="300"]{ transition-delay:.24s; }
}

/* ---------- responsive ---------- */
.hide-sp{ display:inline; }

@media (max-width: 1080px){
  .h1{ font-size:46px; }
  .h2{ font-size:32px; }
  .features{ grid-template-columns:repeat(3,1fr); }
  .features > .feat:nth-child(n+4){ grid-column:span 1; }
  .arch{ grid-template-columns:1fr auto 1fr auto 1.3fr; padding:24px; }
  .arch > :nth-child(n+6){ display:none; }
}

@media (max-width: 880px){
  .container{ padding:0 22px; }
  .sec{ padding:72px 0; }
  .hdr-inner{ gap:16px; height:62px; }
  .hdr-nav{ display:none; }
  .brand-sub{ display:none; }

  .trustbar{ padding:22px 0; }
  .tb-list{ gap:10px 16px; font-size:12.5px; }

  .urg-grid{ grid-template-columns:1fr; gap:14px; }
  .urg-year{ font-size:36px; margin-bottom:14px; }
  .urg-card{ padding:26px 22px; }

  .pain-cause{
    grid-column:1 / -1;
    grid-template-columns:1fr;
    gap:14px;
    padding:22px 20px;
  }
  .pain-cause-head{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding-right:0;
    padding-bottom:12px;
    flex-direction:row;
    align-items:center;
  }

  .voice-grid{ grid-template-columns:1fr; gap:14px; }
  .voice-card{ padding:28px 24px 22px; }
  .voice-quote{ font-size:14.5px; }

  .cta-form{ padding:20px; }
  .cf-row-2{ grid-template-columns:1fr; }

  .hero{ padding-top:48px; }
  .hero-inner{ grid-template-columns:1fr; gap:42px; padding-bottom:64px; }
  .h1{ font-size:36px; }
  .h1-pre{ font-size:18px; }
  .h1-main{ font-size:36px; }
  .h2{ font-size:26px; }
  .h3{ font-size:18px; }

  /* mobile: keep mock inline, no offset */
  .hero-mock{ transform:none; }

  .proof{ grid-template-columns:repeat(2,1fr); margin-top:-24px; }
  .proof-item{ border-right:none; border-bottom:1px solid var(--c-line-soft); }
  .proof-item:nth-child(odd){ border-right:1px solid var(--c-line-soft); }
  .proof-item:nth-last-child(-n+2){ border-bottom:none; }
  .proof-num{ font-size:30px; }

  .pain-grid{ grid-template-columns:1fr 1fr; }
  .pain-cause{ grid-column:span 2; }

  .arch{
    grid-template-columns:1fr;
    gap:8px;
  }
  .arch-link{ transform:rotate(90deg); margin:4px auto; }

  .features{ grid-template-columns:1fr 1fr; }
  .layer{ flex-direction:column; align-items:stretch; padding:22px 22px; }
  .layer-stat{ align-self:flex-end; }

  .partners,
  .poc-grid,
  .support-grid{
    grid-template-columns:1fr;
  }
  .steps{ grid-template-columns:1fr 1fr; gap:24px; }
  .steps::before{ display:none; }

  .case{ padding:24px 22px; }
  .case-kpis{ grid-template-columns:1fr; }

  .plans{ grid-template-columns:1fr; }
  .plan-bridge{ transform:rotate(90deg); padding:8px 0; }

  .cta-inner{ grid-template-columns:1fr; gap:24px; }
  .cta-buttons{ flex-direction:row; flex-wrap:wrap; }

  .ftr-inner{ grid-template-columns:1fr; }
  .ftr-nav{ justify-content:flex-start; }

  .hide-sp{ display:none; }
}

@media (max-width: 540px){
  .h1{ font-size:30px; }
  .h1-main{ font-size:30px; }
  .h1-pre{ font-size:16px; }
  .pain-grid{ grid-template-columns:1fr; }
  .pain-cause{ grid-column:auto; }
  .features{ grid-template-columns:1fr; }
  .case-num{ font-size:32px; }
  .layer h4{ font-size:18px; }
  .layer-3 h4{ font-size:20px; }

  .float-cta{ right:14px; bottom:14px; padding:14px; aspect-ratio:1; }
  .fc-text{ display:none; }
}