/* Disabled custom cursor */
.cursor { display: none !important; }
body, a, button { cursor: auto !important; }
a, button, [data-hover], .btn, .header__link, [role="button"] { cursor: pointer !important; }


    /* ============================================
       Hero — SPEEDA 構造 / 3カラム (左テキスト + 中央画面 + 右フォーム)
       ============================================ */
    .hero {
      position: relative;
      padding: 7rem 2.5rem 4rem;
      max-width: 100rem;
      margin: 0 auto;
      z-index: 1;
    }
    .hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.95fr);
      gap: 2.5rem;
      align-items: stretch;
    }
    .hero__copy {
      max-width: 28rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @keyframes fadeIn { to { opacity: 1; } }

    /* Use case tag chips */
    .hero__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4375rem 0.625rem;
      margin-bottom: 1.75rem;
    }
    .hero__tag {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.8125rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
      padding: 0.4375rem 0.875rem;
      background: var(--c-bg-warm);
      border: 1px solid var(--c-line);
      border-radius: 999px;
    }

    .hero__title {
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: clamp(1.875rem, 2.6vw, 2.375rem);
      line-height: 1.45;
      letter-spacing: -0.005em;
      color: var(--c-text);
      margin-bottom: 1.5rem;
    }
    .hero__title-row {
      display: block;
      white-space: nowrap;
    }
    .hero__title-row--thin {
      font-weight: 500;
      font-size: 0.78em;
      color: var(--c-text-sub);
      margin-top: 0.375rem;
    }
    .hero__title em { font-style: normal; color: var(--c-brand); font-weight: 800; }

    .hero__sub {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.9;
      letter-spacing: 0.02em;
      color: var(--c-text-sub);
      margin-bottom: 1.75rem;
    }
    .hero__sub strong { font-weight: 800; color: var(--c-text); }

    /* CTA row — 2ボタン */
    .hero__cta-row {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .hero__btn-primary,
    .hero__btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      padding: 1rem 1.5rem;
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.875rem;
      letter-spacing: 0.04em;
      border-radius: 999px;
      transition: background-color .2s, transform .2s, border-color .2s;
    }
    .hero__btn-primary {
      background: var(--c-brand);
      color: #fff;
      box-shadow: 0 6px 20px -6px rgba(9,111,200,.4);
    }
    .hero__btn-primary::after {
      content: '→';
      font-weight: 400;
      transition: transform .25s var(--ease-spring);
    }
    .hero__btn-primary:hover {
      background: var(--c-brand-deep);
      transform: translateY(-2px);
    }
    .hero__btn-primary:hover::after { transform: translateX(3px); }
    .hero__btn-secondary {
      background: transparent;
      color: var(--c-text);
      border: 1.5px solid var(--c-text);
    }
    .hero__btn-secondary::after {
      content: '→';
      font-weight: 400;
      transition: transform .25s var(--ease-spring);
    }
    .hero__btn-secondary:hover {
      background: var(--c-text);
      color: #fff;
      transform: translateY(-2px);
    }
    .hero__btn-secondary:hover::after { transform: translateX(3px); }

    /* Center: device mockup with floating cards (3D perspective) */
    .hero__device {
      position: relative;
      padding: 1rem 1rem 1rem;
      perspective: 1400px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .hero__device-stage {
      position: relative;
      width: 100%;
      max-width: 32rem;
      height: 100%;
      max-height: 32rem;
      transform-style: preserve-3d;
      animation: deviceTilt 12s var(--ease-soft) infinite;
      display: flex;
      align-items: center;
    }
    @keyframes deviceTilt {
      0%, 100% { transform: rotateY(-2deg) rotateX(2deg); }
      50%      { transform: rotateY(2deg) rotateX(-1deg); }
    }
    /* タブレット筐体 */
    .hero__screen {
      position: relative;
      width: 100%;
      background: linear-gradient(180deg, #E8ECF0 0%, #C9D1DC 100%);
      border-radius: 1.5rem;
      padding: 0.875rem;
      box-shadow:
        0 40px 80px -20px rgba(10,15,30,.30),
        0 16px 32px rgba(10,15,30,.12),
        inset 0 0 0 1px rgba(255,255,255,.4);
      aspect-ratio: 5 / 4;
      z-index: 1;
    }
    /* 浮かぶカード (3D pop) */
    .hero__pop {
      position: absolute;
      background: #fff;
      border-radius: 0.75rem;
      padding: 0.875rem 1.125rem;
      box-shadow: 0 20px 40px -10px rgba(10,15,30,.18), 0 4px 12px rgba(10,15,30,.06);
      border: 1px solid var(--c-line);
      display: grid;
      grid-template-columns: 2rem 1fr;
      gap: 0.75rem;
      align-items: center;
      width: 14rem;
      z-index: 3;
      opacity: 0;
      animation: popFloat 9s var(--ease-soft) infinite;
    }
    .hero__pop-icon {
      width: 2rem; height: 2rem;
      border-radius: 0.5rem;
      display: grid;
      place-items: center;
      font-family: var(--f-en);
      font-size: 0.875rem;
    }
    .hero__pop-text {
      display: grid;
      gap: 0.125rem;
    }
    .hero__pop-title {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
      line-height: 1.4;
    }
    .hero__pop-meta {
      font-family: var(--f-en);
      font-size: 0.5625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--c-text-mute);
    }
    /* Pop card 1 — アポ獲得 */
    .hero__pop--booked {
      top: -1.5rem; right: -2.5rem;
      transform: translateZ(60px);
      animation-delay: 1s;
    }
    .hero__pop--booked .hero__pop-icon {
      background: rgba(40,200,64,.12);
      color: #128A5C;
    }
    /* Pop card 2 — 返信あり */
    .hero__pop--reply {
      top: 35%; left: -3rem;
      transform: translateZ(40px);
      animation-delay: 4s;
    }
    .hero__pop--reply .hero__pop-icon {
      background: rgba(9,111,200,.10);
      color: var(--c-brand);
    }
    /* Pop card 3 — リード追加 */
    .hero__pop--lead {
      bottom: -1rem; right: -2rem;
      transform: translateZ(50px);
      animation-delay: 6.5s;
    }
    .hero__pop--lead .hero__pop-icon {
      background: rgba(255,118,105,.12);
      color: #C24632;
    }
    @keyframes popFloat {
      0%, 100% { opacity: 0; transform: translateZ(50px) translateY(20px) scale(0.9); }
      10%      { opacity: 1; transform: translateZ(50px) translateY(0) scale(1); }
      30%      { opacity: 1; transform: translateZ(50px) translateY(-6px) scale(1); }
      40%      { opacity: 0; transform: translateZ(50px) translateY(-16px) scale(0.95); }
    }

    /* タブレット/iPad 風モックアップ */
    .hero__screen {
      position: relative;
      background: linear-gradient(180deg, #E8ECF0 0%, #C9D1DC 100%);
      border-radius: 1.5rem;
      padding: 0.875rem;
      box-shadow:
        0 30px 60px -20px rgba(10,15,30,.25),
        0 12px 28px rgba(10,15,30,.10),
        inset 0 0 0 1px rgba(255,255,255,.4);
      aspect-ratio: 4 / 3;
    }
    .hero__screen-inner {
      position: relative;
      background: #fff;
      border-radius: 0.875rem;
      overflow: hidden;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    }
    .hero__screen-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: #F6F7F9;
      border-bottom: 1px solid #E6E8EC;
    }
    .hero__screen-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #FF5F57; }
    .hero__screen-dot:nth-child(2) { background: #FEBC2E; }
    .hero__screen-dot:nth-child(3) { background: #28C840; }
    .hero__screen-url {
      flex: 1;
      margin-left: 0.5rem;
      padding: 0.1875rem 0.625rem;
      background: #fff;
      border: 1px solid #E6E8EC;
      border-radius: 0.25rem;
      font-family: var(--f-en);
      font-size: 0.5625rem;
      letter-spacing: 0.06em;
      color: var(--c-text-mute);
    }
    .hero__screen-body {
      position: relative;
      padding: 1.125rem 1.25rem;
      height: calc(100% - 2rem);
      background: #fff;
      overflow: hidden;
    }
    .hero__scene {
      position: absolute;
      inset: 1.125rem 1.25rem;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 0.875rem;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
      pointer-events: none;
    }
    .hero__scene.is-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Scene B — 会話 (chat conversation) */
    .hero__chat {
      display: flex;
      flex-direction: column;
      gap: 0.4375rem;
      overflow: hidden;
      mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
    }
    .hero__chat-bubble {
      max-width: 78%;
      padding: 0.4375rem 0.625rem;
      border-radius: 0.625rem;
      font-family: var(--f-ja);
      font-size: 0.5625rem;
      line-height: 1.5;
      letter-spacing: 0.04em;
      opacity: 0;
    }
    .hero__chat-bubble--ai {
      background: var(--c-brand);
      color: #fff;
      align-self: flex-start;
      border-bottom-left-radius: 0.1875rem;
    }
    .hero__chat-bubble--user {
      background: #F4F5F8;
      color: var(--c-text);
      align-self: flex-end;
      border-bottom-right-radius: 0.1875rem;
    }
    .hero__chat-typing {
      align-self: flex-start;
      display: flex;
      gap: 0.1875rem;
      padding: 0.4375rem 0.625rem;
      background: #F4F5F8;
      border-radius: 0.625rem;
      border-bottom-left-radius: 0.1875rem;
      opacity: 0;
    }
    .hero__chat-typing span {
      width: 0.25rem; height: 0.25rem;
      border-radius: 50%;
      background: var(--c-text-mute);
      animation: heroChatType 1.2s ease-in-out infinite;
    }
    .hero__chat-typing span:nth-child(2) { animation-delay: .15s; }
    .hero__chat-typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes heroChatType {
      0%, 60%, 100% { transform: translateY(0); opacity: .4; }
      30%           { transform: translateY(-3px); opacity: 1; }
    }
    .hero__scene.is-active .hero__chat-bubble,
    .hero__scene.is-active .hero__chat-typing {
      animation: heroChatIn .35s var(--ease-out) forwards;
    }
    .hero__scene.is-active .hero__chat-bubble:nth-child(1) { animation-delay: .1s; }
    .hero__scene.is-active .hero__chat-bubble:nth-child(2) { animation-delay: .5s; }
    .hero__scene.is-active .hero__chat-bubble:nth-child(3) { animation-delay: 1.0s; }
    .hero__scene.is-active .hero__chat-bubble:nth-child(4) { animation-delay: 1.5s; }
    .hero__scene.is-active .hero__chat-typing { animation-delay: 2.0s; }
    @keyframes heroChatIn { to { opacity: 1; } }

    /* Scene C — Calendar (booking) */
    .hero__cal {
      display: grid;
      gap: 0.4375rem;
    }
    .hero__cal-week {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.25rem;
    }
    .hero__cal-day {
      padding: 0.3125rem 0;
      text-align: center;
      font-family: var(--f-en);
      font-size: 0.4375rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--c-text-mute);
      text-transform: uppercase;
    }
    .hero__cal-slots {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.25rem;
    }
    .hero__cal-slot {
      padding: 0.4375rem 0.25rem;
      background: #F8F9FB;
      border: 1px solid #ECEEF4;
      border-radius: 0.3125rem;
      text-align: center;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 600;
      color: var(--c-text-sub);
      transition: background-color .2s;
    }
    .hero__cal-slot.is-booked {
      background: rgba(40,200,64,.12);
      color: #128A5C;
      border-color: rgba(40,200,64,.3);
      font-weight: 700;
    }
    .hero__cal-slot.is-booked::after { content: ' ✓'; }
    .hero__scene.is-active .hero__cal-slot.is-booked {
      animation: heroCalBook .4s var(--ease-spring) forwards;
    }
    .hero__scene.is-active .hero__cal-slot.is-booked:nth-child(2) { animation-delay: .3s; }
    .hero__scene.is-active .hero__cal-slot.is-booked:nth-child(4) { animation-delay: .6s; }
    .hero__scene.is-active .hero__cal-slot.is-booked:nth-child(7) { animation-delay: .9s; }
    .hero__scene.is-active .hero__cal-slot.is-booked:nth-child(11) { animation-delay: 1.2s; }
    @keyframes heroCalBook {
      0%   { transform: scale(.85); }
      60%  { transform: scale(1.06); }
      100% { transform: scale(1); }
    }
    .hero__cal-summary {
      margin-top: 0.4375rem;
      padding: 0.5rem 0.625rem;
      background: rgba(9,111,200,.06);
      border-radius: 0.375rem;
      font-family: var(--f-ja);
      font-size: 0.5625rem;
      color: var(--c-text);
    }
    .hero__cal-summary strong { color: var(--c-brand); font-weight: 800; }

    /* Scene D — Studio (AI が LP / 資料を自動制作) */
    .hero__studio {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 0.5rem;
      height: 100%;
      overflow: hidden;
    }
    .hero__studio-pane {
      position: relative;
      padding: 0.5rem;
      background: #F8F9FB;
      border: 1px solid #ECEEF4;
      border-radius: 0.5rem;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 0.375rem;
      overflow: hidden;
    }
    .hero__studio-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--f-en);
      font-size: 0.4375rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--c-text-mute);
      text-transform: uppercase;
    }
    .hero__studio-dots {
      display: inline-flex; gap: 0.1875rem;
    }
    .hero__studio-dots span {
      width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
      background: #E1E4EB;
    }
    .hero__studio-dots span:nth-child(1) { background: #FF6B6B; }
    .hero__studio-dots span:nth-child(2) { background: #FFC542; }
    .hero__studio-dots span:nth-child(3) { background: #28C840; }
    .hero__studio-progress {
      height: 2px; width: 100%;
      background: #E6E9EF;
      border-radius: 999px;
      overflow: hidden;
    }
    .hero__studio-progress::after {
      content: '';
      display: block;
      height: 100%;
      background: var(--c-brand);
      width: 0%;
    }
    .hero__scene.is-active .hero__studio-progress::after {
      animation: heroStudioFill 4.2s ease-out forwards;
    }
    @keyframes heroStudioFill {
      0%   { width: 0%; }
      40%  { width: 55%; }
      80%  { width: 88%; }
      100% { width: 100%; }
    }
    /* LP preview (left pane) */
    .hero__lp {
      display: grid;
      gap: 0.3125rem;
      align-content: start;
      padding: 0.125rem 0.0625rem;
    }
    .hero__lp-bar {
      height: 0.3125rem;
      background: #E1E4EB;
      border-radius: 0.1875rem;
      opacity: 0;
      transform: translateY(4px);
      animation: heroLpDraw .5s var(--ease-out) forwards;
    }
    .hero__lp-bar.is-hero  { height: 0.75rem; background: linear-gradient(90deg, var(--c-brand), #76B7ED); animation-delay: .1s; }
    .hero__lp-bar.is-title { width: 60%; animation-delay: .5s; }
    .hero__lp-bar.is-text  { animation-delay: .8s; }
    .hero__lp-bar.is-text2 { width: 82%; animation-delay: 1.1s; }
    .hero__lp-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.25rem;
      margin-top: 0.1875rem;
    }
    .hero__lp-cards span {
      height: 0.875rem;
      background: #fff;
      border: 1px solid #E1E4EB;
      border-radius: 0.25rem;
      opacity: 0;
      animation: heroLpDraw .5s var(--ease-out) forwards;
    }
    .hero__lp-cards span:nth-child(1) { animation-delay: 1.4s; }
    .hero__lp-cards span:nth-child(2) { animation-delay: 1.6s; }
    .hero__lp-cards span:nth-child(3) { animation-delay: 1.8s; }
    .hero__lp-cta {
      height: 0.5rem;
      width: 40%;
      background: linear-gradient(90deg, var(--c-brand-deep), var(--c-brand));
      border-radius: 0.25rem;
      margin-top: 0.1875rem;
      opacity: 0;
      animation: heroLpDraw .5s var(--ease-out) forwards;
      animation-delay: 2.1s;
    }
    @keyframes heroLpDraw {
      to { opacity: 1; transform: translateY(0); }
    }
    /* 資料 preview (right pane) */
    .hero__doc {
      display: grid;
      gap: 0.25rem;
      align-content: start;
      padding: 0.125rem 0.0625rem;
    }
    .hero__doc-line {
      height: 0.1875rem;
      background: #E1E4EB;
      border-radius: 999px;
      opacity: 0;
      animation: heroLpDraw .4s var(--ease-out) forwards;
    }
    .hero__doc-line.is-h { height: 0.4375rem; width: 70%; background: var(--c-text); animation-delay: .3s; }
    .hero__doc-line.is-l1 { width: 95%; animation-delay: .7s; }
    .hero__doc-line.is-l2 { width: 88%; animation-delay: .9s; }
    .hero__doc-line.is-l3 { width: 78%; animation-delay: 1.1s; }
    .hero__doc-line.is-l4 { width: 92%; animation-delay: 1.3s; }
    .hero__doc-line.is-l5 { width: 70%; animation-delay: 1.5s; }
    .hero__doc-chart {
      margin-top: 0.25rem;
      height: 1.25rem;
      background: linear-gradient(180deg, rgba(9,111,200,.16), rgba(9,111,200,.02));
      border-radius: 0.25rem;
      position: relative;
      overflow: hidden;
      opacity: 0;
      animation: heroLpDraw .4s var(--ease-out) forwards;
      animation-delay: 1.8s;
    }
    .hero__doc-chart::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 100%;
      background:
        linear-gradient(90deg, transparent 0 14%, var(--c-brand) 14% 16%, transparent 16% 28%, var(--c-brand) 28% 30%, transparent 30% 42%, var(--c-brand) 42% 44%, transparent 44% 56%, var(--c-brand) 56% 58%, transparent 58% 70%, var(--c-brand) 70% 72%, transparent 72% 84%, var(--c-brand) 84% 86%, transparent 86%);
      clip-path: polygon(0 80%, 14% 60%, 28% 70%, 42% 45%, 56% 50%, 70% 25%, 84% 30%, 100% 10%, 100% 100%, 0 100%);
      background: linear-gradient(180deg, rgba(9,111,200,.7), rgba(9,111,200,.2));
    }
    .hero__studio-foot {
      display: flex;
      align-items: center;
      gap: 0.3125rem;
      font-family: var(--f-ja);
      font-size: 0.5rem;
      color: var(--c-text-sub);
    }
    .hero__studio-foot strong { color: var(--c-brand); font-weight: 800; }
    .hero__studio-spin {
      width: 0.5rem; height: 0.5rem;
      border-radius: 50%;
      border: 1.5px solid #E1E4EB;
      border-top-color: var(--c-brand);
      animation: heroStudioSpin 1s linear infinite;
    }
    @keyframes heroStudioSpin {
      to { transform: rotate(360deg); }
    }

    /* Scene tabs (bottom indicator dots) */
    .hero__scene-tabs {
      position: absolute;
      bottom: 0.625rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.3125rem;
      z-index: 5;
    }
    .hero__scene-tab {
      width: 0.875rem; height: 0.1875rem;
      border-radius: 999px;
      background: #E6E8EC;
      transition: background-color .3s, width .3s;
    }
    .hero__scene-tab.is-active {
      background: var(--c-brand);
      width: 1.5rem;
    }
    .hero__screen-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .hero__screen-title {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--c-text);
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
    }
    .hero__screen-title::before {
      content: '';
      width: 0.4375rem; height: 0.4375rem;
      border-radius: 50%;
      background: #28C840;
      box-shadow: 0 0 6px rgba(40,200,64,.5);
    }
    .hero__screen-count {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--c-text-mute);
    }
    .hero__screen-count strong { color: var(--c-brand); font-weight: 700; }

    .hero__screen-feed {
      display: grid;
      gap: 0.4375rem;
      align-content: start;
    }
    .hero__screen-row {
      display: grid;
      grid-template-columns: 0.5rem 1fr auto auto;
      gap: 0.625rem;
      align-items: center;
      padding: 0.5625rem 0.75rem;
      background: #F8F9FB;
      border: 1px solid #ECEEF4;
      border-radius: 0.4375rem;
      font-family: var(--f-en);
      font-size: 0.5625rem;
      color: var(--c-text-sub);
      opacity: 0;
      animation: feedSlideIn .5s var(--ease-out) forwards;
    }
    @keyframes feedSlideIn { to { opacity: 1; } }
    .hero__screen-row:nth-child(1) { animation-delay: .2s; }
    .hero__screen-row:nth-child(2) { animation-delay: .8s; }
    .hero__screen-row:nth-child(3) { animation-delay: 1.4s; }
    .hero__screen-row:nth-child(4) { animation-delay: 2.0s; }
    .hero__screen-row:nth-child(5) { animation-delay: 2.6s; }

    .hero__screen-status {
      width: 0.4375rem; height: 0.4375rem;
      border-radius: 50%;
      background: var(--c-brand-2);
    }
    .hero__screen-row[data-status="booked"] .hero__screen-status { background: #28C840; }
    .hero__screen-row[data-status="working"] .hero__screen-status { background: #FEBC2E; }
    .hero__screen-co { color: var(--c-text); font-family: var(--f-ja-bold); font-size: 0.625rem; font-weight: 700; }
    .hero__screen-meta { color: var(--c-text-mute); font-size: 0.5rem; letter-spacing: 0.04em; }
    .hero__screen-tag {
      padding: 0.125rem 0.4375rem;
      border-radius: 999px;
      font-family: var(--f-en);
      font-size: 0.4375rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .hero__screen-tag--booked { background: rgba(40,200,64,.14); color: #128A5C; }
    .hero__screen-tag--working { background: rgba(254,188,46,.18); color: #B07820; }
    .hero__screen-tag--scanning { background: rgba(9,111,200,.10); color: var(--c-brand); }

    /* AI カーソル */
    .hero__screen-cursor {
      position: absolute;
      top: 50%; left: 40%;
      width: 0.875rem; height: 0.875rem;
      pointer-events: none;
      z-index: 3;
      animation: cursorRoam 9s var(--ease-soft) infinite;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
    }
    .hero__screen-cursor svg { width: 100%; height: 100%; fill: var(--c-text); }
    @keyframes cursorRoam {
      0%   { top: 35%; left: 25%; }
      25%  { top: 45%; left: 75%; }
      50%  { top: 65%; left: 35%; }
      75%  { top: 55%; left: 80%; }
      100% { top: 35%; left: 25%; }
    }

    /* 右側フル登録フォーム */
    .hero__form {
      background: var(--c-surface);
      border-radius: 1rem;
      padding: 1.5rem 1.5rem 1.375rem;
      box-shadow: 0 8px 30px -10px rgba(10,15,30,.10);
      border: 1px solid var(--c-line);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero__form-heading {
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: 0.9375rem;
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: var(--c-text);
      margin-bottom: 0.875rem;
    }
    .hero__form-field { display: grid; gap: 0.25rem; margin-bottom: 0.5rem; }
    .hero__form-field--split {
      grid-template-columns: 1fr 1fr;
      gap: 0.625rem;
    }
    .hero__form-field--split .hero__form-input {
      grid-column: auto;
    }
    .hero__form-field--full > .hero__form-label {
      grid-column: 1 / -1;
    }
    .hero__form-label {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
    }
    .hero__form-input,
    .hero__form-select {
      width: 100%;
      padding: 0.625rem 0.75rem;
      background: var(--c-bg-warm);
      border: 1px solid var(--c-line);
      border-radius: 0.5rem;
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      color: var(--c-text);
      transition: border-color .2s, background-color .2s;
    }
    .hero__form-input:focus,
    .hero__form-select:focus { outline: none; border-color: var(--c-brand); background: #fff; }
    .hero__form-input::placeholder { color: var(--c-text-mute); }
    .hero__form-select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%239A9A9A' stroke-width='1.5'/></svg>");
      background-repeat: no-repeat;
      background-position: right 0.875rem center;
      padding-right: 2.25rem;
    }
    .hero__form-btn {
      width: 100%;
      padding: 0.8125rem 1.5rem;
      background: var(--c-brand);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.875rem;
      letter-spacing: 0.04em;
      transition: background-color .2s, transform .15s, box-shadow .2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      margin-top: 0.375rem;
      box-shadow: 0 6px 20px -6px rgba(9,111,200,.4);
    }
    .hero__form-btn::after { content: '→'; transition: transform .25s var(--ease-spring); }
    .hero__form-btn:hover {
      background: var(--c-brand-deep);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -6px rgba(9,111,200,.5);
    }
    .hero__form-btn:hover::after { transform: translateX(4px); }
    .hero__form-note {
      margin-top: 0.75rem;
      font-family: var(--f-ja);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--c-text-mute);
      text-align: center;
    }

    /* ============================================
       Trust Strip — SPEEDA 風 / 横並び 業界ピル
       ============================================ */
    .trust {
      max-width: 100rem;
      margin: 0 auto;
      padding: 2.5rem 2.5rem 4rem;
      position: relative;
      z-index: 1;
    }
    .trust__head {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .trust__check {
      width: 1.125rem; height: 1.125rem;
      border-radius: 50%;
      background: var(--c-brand);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 800;
    }
    .trust__check::before { content: '✓'; }
    .trust__text {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.875rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
    }
    .trust__text strong {
      color: var(--c-brand);
      font-weight: 900;
      font-size: 1.0625rem;
      margin: 0 0.125rem;
    }
    .trust__logos {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
    }
    .trust__logo {
      padding: 0.6875rem 1.25rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 0.5rem;
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.8125rem;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      white-space: nowrap;
      transition: border-color .2s, color .2s;
    }
    .trust__logo:hover { border-color: var(--c-text); color: var(--c-text); }

    /* ============================================
       Section common
       ============================================ */
    .section { position: relative; padding: 6rem 2.5rem; max-width: var(--container); margin: 0 auto; z-index: 1; }
    .section--center { text-align: center; }
    .section--center .sec-head { margin-left: auto; margin-right: auto; }
    .sec-head { margin-bottom: 4rem; padding-top: 4rem; border-top: 1px solid var(--c-line); max-width: 56rem; }
    .sec-stamp { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
    .ss-num { font-family: var(--f-en); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; color: var(--c-brand); }
    .ss-line { width: 3rem; height: 1px; background: var(--c-line); }
    .ss-glyph { color: var(--c-brand); font-size: 0.75rem; }
    .section--center .sec-stamp { justify-content: center; }
    .sec-eyebrow {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      color: var(--c-text-mute);
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .sec-title {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: clamp(1.625rem, 2.8vw, 2.25rem);
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: var(--c-text);
      margin-bottom: 1.5rem;
    }
    .sec-title em {
      font-style: normal;
      font-family: inherit;
      font-weight: inherit;
      font-size: 1em;
      letter-spacing: inherit;
      margin: 0 0.04em;
      background: linear-gradient(110deg,
        var(--c-brand-deep) 0%,
        var(--c-brand) 25%,
        #4A95E0 50%,
        var(--c-brand-2) 75%,
        var(--c-brand) 100%
      );
      background-size: 250% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: emShimmer 7s linear infinite;
    }
    @keyframes emShimmer {
      0%   { background-position: 0% 50%; }
      100% { background-position: 250% 50%; }
    }
    .sec-lead {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.9375rem;
      line-height: 2.05;
      letter-spacing: 0.06em;
      color: var(--c-text-sub);
    }

    /* ============================================
       Persona — 3 use cases (3-column layout)
       ============================================ */
    .persona__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .persona-card {
      background: var(--c-surface);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-rest);
      transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
      cursor: auto;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 0;
    }
    .persona-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
    .persona-card__vis {
      position: relative;
      background:
        radial-gradient(120% 80% at 50% 30%, rgba(255,255,255,.7), transparent 60%),
        linear-gradient(135deg, #EEF4FF 0%, #DBEAFE 55%, rgba(118,183,237,.10) 100%);
      overflow: hidden;
      display: grid;
      place-items: stretch;
      height: 12.5rem;
      box-shadow: inset 0 0 0 1px rgba(9,111,200,.06);
    }
    .persona-card__vis::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right, rgba(9,111,200,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(9,111,200,.07) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: .5;
      mask-image: radial-gradient(circle at center, #000 35%, transparent 75%);
      -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 75%);
      pointer-events: none;
    }
    .persona-card__vis .scan-line {
      position: absolute;
      top: 0;
      left: -20%;
      width: 25%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      animation: scanSweep 6s var(--ease-soft) infinite;
      pointer-events: none;
      mix-blend-mode: overlay;
    }
    .persona-card__vis svg {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 1;
    }
    .persona-card__body {
      padding: 1.75rem 1.75rem 1.875rem;
      display: grid;
      gap: 0.75rem;
      align-content: start;
    }
    .persona-card__role {
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      padding: 0 0 0 0.875rem;
      position: relative;
      width: fit-content;
      margin-bottom: 0.125rem;
    }
    .persona-card__role::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1875rem;
      bottom: 0.1875rem;
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--c-brand-deep), var(--c-brand));
    }
    .persona-card__role-num {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.26em;
      color: var(--c-text-mute);
      text-transform: uppercase;
      line-height: 1;
    }
    .persona-card__role-name {
      font-family: var(--f-en);
      font-size: 0.9375rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: var(--c-brand-deep);
      text-transform: uppercase;
      line-height: 1.1;
    }
    .persona-card__pain {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.8;
      letter-spacing: 0.04em;
      color: var(--c-text-mute);
      padding: 0.375rem 0 0.875rem 0;
      border-bottom: 1px dashed var(--c-line);
      position: relative;
      margin: 0;
    }
    .persona-card__title {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.0625rem;
      line-height: 1.55;
      letter-spacing: 0.06em;
      color: var(--c-text);
      margin: 0;
    }
    .persona-card__title em { font-style: normal; color: var(--c-brand); }
    .persona-card__desc {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      margin: 0;
    }

    /* === Persona scene rotation === */
    @keyframes pSceneCycle {
      0%, 50%, 100% { opacity: 0; transform: scale(.94); }
      4%, 46%       { opacity: 1; transform: scale(1); }
    }
    .persona-card__vis .p-scene {
      animation: pSceneCycle 10s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .persona-card__vis .p-scene--a { animation-delay: 0s; }
    .persona-card__vis .p-scene--b { animation-delay: 5s; }

    /* === Persona illustration animations === */
    @keyframes pIllusBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    @keyframes pCoinDrain {
      0%, 100% { opacity: .25; transform: translateY(0); }
      50%      { opacity: 1; transform: translateY(4px); }
    }
    @keyframes pAdRise {
      0%   { transform: scaleY(.4); }
      50%, 100% { transform: scaleY(1); }
    }
    @keyframes pLeadFall {
      0%   { transform: translateY(0); opacity: 1; }
      80%  { transform: translateY(50px); opacity: 0; }
      100% { transform: translateY(50px); opacity: 0; }
    }
    @keyframes pTeamPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.08); }
    }
    @keyframes pAptBars {
      0%, 100% { transform: scaleY(.5); }
      50%      { transform: scaleY(1); }
    }
    .p-illus-sm .p-coin {
      transform-origin: center;
      transform-box: fill-box;
      animation: pCoinDrain 1.6s var(--ease-soft) infinite;
    }
    .p-illus-sm .p-coin:nth-of-type(2) { animation-delay: .3s; }
    .p-illus-sm .p-coin:nth-of-type(3) { animation-delay: .6s; }
    .p-illus-sm .p-coin:nth-of-type(4) { animation-delay: .9s; }
    .p-illus-sm .p-flat {
      stroke-dasharray: 120;
      stroke-dashoffset: 0;
      animation: pDashFlow 4s linear infinite;
    }
    @keyframes pDashFlow {
      from { stroke-dashoffset: 120; }
      to   { stroke-dashoffset: 0; }
    }

    .p-illus-startup .p-team {
      transform-origin: center;
      transform-box: fill-box;
      animation: pTeamPulse 2.6s var(--ease-soft) infinite;
    }
    .p-illus-startup .p-apt-bar {
      transform-origin: bottom center;
      transform-box: fill-box;
      animation: pAptBars 2.4s var(--ease-soft) infinite;
    }
    .p-illus-startup .p-apt-bar:nth-of-type(2) { animation-delay: .3s; }
    .p-illus-startup .p-apt-bar:nth-of-type(3) { animation-delay: .6s; }
    .p-illus-startup .p-apt-bar:nth-of-type(4) { animation-delay: .9s; }
    .p-illus-startup .p-apt-bar:nth-of-type(5) { animation-delay: 1.2s; }

    .p-illus-mkt .p-ad-bar {
      transform-origin: bottom center;
      transform-box: fill-box;
      animation: pAdRise 3s var(--ease-soft) infinite;
    }
    .p-illus-mkt .p-ad-bar:nth-of-type(2) { animation-delay: .25s; }
    .p-illus-mkt .p-ad-bar:nth-of-type(3) { animation-delay: .5s; }
    .p-illus-mkt .p-ad-bar:nth-of-type(4) { animation-delay: .75s; }
    .p-illus-mkt .p-lead-dot {
      transform-origin: center;
      transform-box: fill-box;
      animation: pLeadFall 3s ease-in infinite;
    }
    .p-illus-mkt .p-lead-dot:nth-of-type(2) { animation-delay: .4s; }
    .p-illus-mkt .p-lead-dot:nth-of-type(3) { animation-delay: .8s; }
    .p-illus-mkt .p-lead-dot:nth-of-type(4) { animation-delay: 1.2s; }
    .p-illus-mkt .p-lead-dot:nth-of-type(5) { animation-delay: 1.6s; }
    /* Legacy iconBob (kept for potential reuse) */
    @keyframes iconBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .persona-card:nth-child(1) .persona-card__icon svg { animation: iconBob 3.2s var(--ease-soft) infinite; }
    .persona-card:nth-child(2) .persona-card__icon svg { animation: iconBob 3.2s var(--ease-soft) infinite .4s; }
    .persona-card:nth-child(3) .persona-card__icon svg { animation: iconBob 3.2s var(--ease-soft) infinite .8s; }

    /* Section CTA banner after persona grid */
    .persona-cta {
      max-width: var(--container);
      margin: 2.5rem auto 0;
      display: flex;
      justify-content: center;
    }
    .persona-cta__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.875rem;
      padding: 1.125rem 2rem 1.125rem 2.25rem;
      background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%);
      color: #fff;
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.08em;
      border-radius: 999px;
      box-shadow: 0 14px 30px -10px rgba(9,111,200,.45);
      transition: transform .35s var(--ease-spring), box-shadow .35s;
      position: relative;
      overflow: hidden;
    }
    .persona-cta__btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
      transform: translateX(-100%);
      transition: transform .8s var(--ease-soft);
    }
    .persona-cta__btn:hover::before { transform: translateX(100%); }
    .persona-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px rgba(9,111,200,.55); }
    .persona-cta__btn .arrow {
      width: 1.75rem; height: 1.75rem;
      border-radius: 50%;
      background: #FFFFFF;
      color: var(--c-brand-deep);
      display: grid;
      place-items: center;
      font-weight: 800;
      transition: transform .35s var(--ease-spring);
    }
    .persona-cta__btn:hover .arrow { transform: translateX(4px); }

    /* ============================================
       Service overview pillars (light Goodpatch tone)
       ============================================ */
    .overview-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .overview-pillar {
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      padding: 1.875rem 1.75rem 2rem;
      display: grid;
      gap: 0.875rem;
      align-content: start;
      transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
    }
    .overview-pillar:hover {
      transform: translateY(-4px);
      border-color: var(--c-brand);
      box-shadow: 0 18px 40px -20px rgba(9,111,200,.28);
    }
    .overview-pillar__n {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 0.6875rem;
      letter-spacing: 0.22em;
      color: var(--c-brand);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
    }
    .overview-pillar__n::before {
      content: '';
      width: 1.25rem; height: 1px;
      background: var(--c-brand);
    }
    .overview-pillar__t {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.0625rem;
      line-height: 1.5;
      letter-spacing: 0.06em;
      color: var(--c-text);
    }
    .overview-pillar__d {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
    }
    /* Hero illustration on each pillar */
    .overview-pillar__visual {
      position: relative;
      width: 100%;
      height: 13rem;
      margin-bottom: 0.5rem;
      border-radius: 1rem;
      background:
        radial-gradient(120% 80% at 50% 30%, rgba(255,255,255,.6), transparent 60%),
        linear-gradient(135deg, #EEF4FF 0%, #DBEAFE 55%, rgba(255,118,105,.10) 100%);
      overflow: hidden;
      display: grid;
      place-items: center;
      box-shadow: inset 0 0 0 1px rgba(9,111,200,.06);
    }
    /* Subtle grid pattern (AI workspace feel) */
    .overview-pillar__visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right, rgba(9,111,200,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(9,111,200,.07) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: .5;
      mask-image: radial-gradient(circle at center, #000 35%, transparent 75%);
      -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 75%);
      pointer-events: none;
    }
    /* Scanning line — sweeps left to right slowly */
    .overview-pillar__visual .scan-line {
      position: absolute;
      top: 0;
      left: -20%;
      width: 20%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      animation: scanSweep 6s var(--ease-soft) infinite;
      pointer-events: none;
      mix-blend-mode: overlay;
    }
    @keyframes scanSweep {
      0% { left: -25%; }
      100% { left: 120%; }
    }
    .overview-pillar__visual svg {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 1;
    }

    /* ========== Generic pillar scene rotation ========== */
    @keyframes pillarSceneCycle {
      0%, 50%, 100% { opacity: 0; transform: scale(.94); }
      4%, 46%       { opacity: 1; transform: scale(1); }
    }
    .overview-pillar__visual .pillar-scene {
      animation: pillarSceneCycle 10s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .overview-pillar__visual .pillar-scene--a { animation-delay: 0s; }
    .overview-pillar__visual .pillar-scene--b { animation-delay: 5s; }

    /* ========== PRICING animation ========== */
    @keyframes coinPulse {
      0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 8px rgba(9,111,200,.25)); }
      50% { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 10px 20px rgba(9,111,200,.4)); }
    }
    @keyframes glowPulse {
      0%, 100% { opacity: .4; transform: scale(1); }
      50% { opacity: .8; transform: scale(1.1); }
    }
    @keyframes particleFloat {
      0%   { transform: translateY(0) translateX(0); opacity: 0; }
      20%  { opacity: 1; }
      100% { transform: translateY(-30px) translateX(var(--x, 8px)); opacity: 0; }
    }
    .pillar-icon--pricing .yen-circle {
      animation: coinPulse 3s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .pillar-icon--pricing .yen-glow {
      animation: glowPulse 3s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .pillar-icon--pricing .price-particle {
      animation: particleFloat 2.4s ease-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .pillar-icon--pricing .price-particle:nth-child(odd) { animation-delay: 1.2s; }
    .pillar-icon--pricing .price-particle:nth-child(3n) { animation-delay: .6s; }

    /* ========== OPERATION animation — 3-scene sales activity ========== */
    @keyframes opSceneCycle {
      0%, 100% { opacity: 0; transform: scale(.98); }
      1%, 33%  { opacity: 1; transform: scale(1); }
      34%      { opacity: 0; transform: scale(.98); }
    }
    .pillar-icon--operation .op-scene {
      animation: opSceneCycle 13.5s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
      opacity: 0;
    }
    .pillar-icon--operation .op-scene--a { animation-delay: 0s; }
    .pillar-icon--operation .op-scene--b { animation-delay: 4.5s; }
    .pillar-icon--operation .op-scene--c { animation-delay: 9s; }

    /* Persistent KPI ticker (always visible behind scenes) */
    @keyframes opTickerPulse {
      0%, 100% { opacity: .92; }
      50%      { opacity: 1; }
    }
    @keyframes opTickerCount {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-1px); }
    }
    .pillar-icon--operation .op-ticker { animation: opTickerPulse 2.4s ease-in-out infinite; }
    .pillar-icon--operation .op-ticker-num {
      transform-origin: center;
      transform-box: fill-box;
      animation: opTickerCount 2.4s var(--ease-soft) infinite;
    }
    .pillar-icon--operation .op-ticker-num:nth-of-type(2) { animation-delay: .8s; }
    .pillar-icon--operation .op-ticker-num:nth-of-type(3) { animation-delay: 1.6s; }

    /* Sparkline draw */
    @keyframes opSparkDraw {
      0%   { stroke-dashoffset: 200; }
      60%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
    .pillar-icon--operation .op-spark {
      stroke-dasharray: 200;
      animation: opSparkDraw 6s ease-in-out infinite;
    }

    /* Row action icon pulse */
    @keyframes opIconPulse {
      0%, 100% { opacity: .55; }
      50%      { opacity: 1; }
    }
    .pillar-icon--operation .op-row-icon { animation: opIconPulse 1.8s ease-in-out infinite; }

    /* Pipeline rows — always visible inside Scene A (scene's opacity drives reveal) */
    .pillar-icon--operation .op-feed-row { opacity: 1; }

    /* Chat bubbles — always visible inside Scene B */
    .pillar-icon--operation .op-chat-bubble { opacity: 1; }

    /* Calendar slots — always visible inside Scene C */
    .pillar-icon--operation .op-cal-slot { opacity: 1; }

    @keyframes opCoreBreath {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(9,111,200,.5)); }
      50%      { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(9,111,200,.8)); }
    }
    @keyframes opRingPulse {
      0%   { transform: scale(.5); opacity: 1; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    @keyframes opTaskAppear {
      0%, 100% { opacity: 0; transform: translateY(6px) scale(.9); }
      8%, 38%  { opacity: 1; transform: translateY(0) scale(1); }
      46%      { opacity: 0; transform: translateY(-6px) scale(.95); }
    }
    @keyframes opMsgFly {
      0%   { transform: translate(0, 0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translate(var(--dx, 50px), var(--dy, -30px)); opacity: 0; }
    }
    @keyframes opCheck {
      0%, 30% { stroke-dashoffset: 18; }
      50%, 100% { stroke-dashoffset: 0; }
    }
    @keyframes opCounterTick {
      0%, 100% { opacity: 1; }
      50%      { opacity: .55; }
    }
    .pillar-icon--operation .op-core {
      transform-origin: center;
      transform-box: fill-box;
      animation: opCoreBreath 2.4s var(--ease-soft) infinite;
    }
    .pillar-icon--operation .op-ring {
      transform-origin: center;
      transform-box: fill-box;
      animation: opRingPulse 3s ease-out infinite;
    }
    .pillar-icon--operation .op-ring:nth-of-type(2) { animation-delay: 1s; }
    .pillar-icon--operation .op-ring:nth-of-type(3) { animation-delay: 2s; }
    .pillar-icon--operation .op-task {
      transform-origin: center;
      transform-box: fill-box;
      opacity: 0;
      animation: opTaskAppear 4.8s var(--ease-soft) infinite;
    }
    .pillar-icon--operation .op-task--mail   { animation-delay: 0s; }
    .pillar-icon--operation .op-task--call   { animation-delay: .6s; }
    .pillar-icon--operation .op-task--chat   { animation-delay: 1.2s; }
    .pillar-icon--operation .op-task--cal    { animation-delay: 1.8s; }
    .pillar-icon--operation .op-task--data   { animation-delay: 2.4s; }
    .pillar-icon--operation .op-task--target { animation-delay: 3.0s; }
    .pillar-icon--operation .op-msg {
      transform-origin: center;
      transform-box: fill-box;
      animation: opMsgFly 3s ease-out infinite;
    }
    .pillar-icon--operation .op-msg:nth-of-type(2) { animation-delay: .7s; }
    .pillar-icon--operation .op-msg:nth-of-type(3) { animation-delay: 1.4s; }
    .pillar-icon--operation .op-msg:nth-of-type(4) { animation-delay: 2.1s; }
    .pillar-icon--operation .op-check {
      stroke-dasharray: 18;
      animation: opCheck 4.8s ease-in-out infinite;
    }
    .pillar-icon--operation .op-counter {
      animation: opCounterTick 1.6s ease-in-out infinite;
    }

    /* ========== CREATIVE animation — AI building 3 assets ========== */
    @keyframes crBlockBuild {
      0%, 100% { opacity: 0; transform: translateY(6px); }
      8%, 92%  { opacity: 1; transform: translateY(0); }
    }
    @keyframes crTypeLine {
      0%, 100% { transform: scaleX(0); }
      30%, 80% { transform: scaleX(1); }
    }
    @keyframes crCursor {
      0%   { transform: translate(0, 0); }
      18%  { transform: translate(50px, 0); }
      36%  { transform: translate(50px, 22px); }
      54%  { transform: translate(0, 22px); }
      72%  { transform: translate(20px, 50px); }
      100% { transform: translate(0, 0); }
    }
    @keyframes crSparkle {
      0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); }
      40%, 60% { opacity: 1; transform: scale(1) rotate(180deg); }
    }
    @keyframes crBuildProgress {
      0%   { stroke-dashoffset: 200; }
      80%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
    @keyframes crSheen {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(180%); }
    }
    .pillar-icon--creative .cr-block {
      transform-origin: left center;
      transform-box: fill-box;
      opacity: 0;
      animation: crBlockBuild 6s var(--ease-soft) infinite;
    }
    .pillar-icon--creative .cr-block:nth-of-type(1) { animation-delay: 0s; }
    .pillar-icon--creative .cr-block:nth-of-type(2) { animation-delay: .5s; }
    .pillar-icon--creative .cr-block:nth-of-type(3) { animation-delay: 1.0s; }
    .pillar-icon--creative .cr-block:nth-of-type(4) { animation-delay: 1.5s; }
    .pillar-icon--creative .cr-block:nth-of-type(5) { animation-delay: 2.0s; }
    .pillar-icon--creative .cr-block:nth-of-type(6) { animation-delay: 2.5s; }
    .pillar-icon--creative .cr-line-fill {
      transform-origin: left center;
      transform-box: fill-box;
      animation: crTypeLine 3.5s var(--ease-soft) infinite;
      width: 100px;
    }
    .pillar-icon--creative .cr-cursor {
      animation: crCursor 7s var(--ease-soft) infinite;
      transform-box: fill-box;
    }
    .pillar-icon--creative .cr-progress {
      stroke-dasharray: 200;
      animation: crBuildProgress 6s var(--ease-soft) infinite;
    }
    .pillar-icon--creative .cr-sparkle {
      animation: crSparkle 2.4s var(--ease-soft) infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .pillar-icon--creative .cr-sparkle:nth-of-type(2) { animation-delay: .6s; }
    .pillar-icon--creative .cr-sparkle:nth-of-type(3) { animation-delay: 1.2s; }
    .pillar-icon--creative .cr-sparkle:nth-of-type(4) { animation-delay: 1.8s; }

    /* AI badge in upper-right of visual */
    .overview-pillar__visual::after {
      content: '◉ AI AGENT';
      position: absolute;
      top: .7rem;
      right: .8rem;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 800;
      letter-spacing: 0.26em;
      color: var(--c-brand-deep);
      background: rgba(255,255,255,.9);
      padding: 0.22rem 0.55rem;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      box-shadow: 0 2px 8px -2px rgba(9,111,200,.2);
      z-index: 2;
    }

    /* ============================================
       Agents — 8 capability cards (SalesMarker style)
       上半分: ライトグレー背景 + UIモック
       下半分: 白背景 + タイトル + 説明
       ============================================ */
    .agents__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    .agent-card {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 0.875rem;
      overflow: hidden;
      transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
      cursor: pointer;
      display: grid;
      grid-template-rows: 9.5rem 1fr;
    }
    .agent-card:hover {
      transform: translateY(-4px);
      border-color: var(--c-brand);
      box-shadow: 0 18px 40px -20px rgba(9,111,200,.28);
    }
    .agent-card__visual {
      position: relative;
      background: #F4F6F9;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .agent-card__body {
      padding: 1.25rem 1.125rem 1.5rem;
      display: grid;
      gap: 0.5rem;
      align-content: start;
    }
    .agent-card__title {
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: 0.9375rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
      line-height: 1.5;
    }
    .agent-card__desc {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.8;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
    }

    /* === Visual mocks for each card === */
    .agent-mock {
      position: relative;
      width: 78%;
      max-width: 12rem;
      filter: drop-shadow(0 6px 14px rgba(15,20,25,.08));
    }
    .agent-mock__card {
      background: #fff;
      border-radius: 0.5rem;
      padding: 0.5rem 0.625rem;
      display: grid;
      gap: 0.25rem;
    }
    .agent-mock__row {
      display: flex; align-items: center; gap: 0.375rem;
      padding: 0.25rem 0.375rem;
      background: #F4F6F9;
      border-radius: 0.25rem;
      font-family: var(--f-en);
      font-size: 0.4375rem;
      font-weight: 700;
      color: #fff;
    }
    .agent-mock__row.is-brand { background: var(--c-brand); }
    .agent-mock__row.is-white { background: #fff; border: 1px solid #E4E7EC; color: var(--c-text-mute); }
    .agent-mock__chip {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.1875rem 0.375rem;
      border-radius: 0.1875rem;
      font-family: var(--f-en);
      font-size: 0.375rem;
      font-weight: 700;
      background: var(--c-brand);
      color: #fff;
      letter-spacing: 0.05em;
    }
    .agent-mock__chip.is-light { background: #fff; color: var(--c-brand); border: 1px solid rgba(9,111,200,.3); }
    .agent-mock__chip.is-green { background: #28C840; }
    .agent-mock__bar {
      height: 0.25rem; background: #E4E7EC; border-radius: 999px;
    }
    .agent-mock__bar.is-brand { background: var(--c-brand); }
    .agent-mock__line {
      height: 0.125rem; background: #E4E7EC; border-radius: 999px;
    }
    .agent-mock__bullet {
      width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c-brand);
      display: inline-block;
    }
    .agent-mock__icon {
      width: 1.125rem; height: 1.125rem; border-radius: 0.25rem;
      background: var(--c-brand);
      display: grid; place-items: center;
      color: #fff;
      font-family: var(--f-en);
      font-size: 0.5625rem;
      font-weight: 800;
    }
    .agent-mock__pin {
      position: absolute;
      top: -0.5rem; right: -0.5rem;
      padding: 0.25rem 0.4375rem;
      background: var(--c-brand);
      color: #fff;
      border-radius: 999px;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      display: inline-flex; align-items: center; gap: 0.1875rem;
      box-shadow: 0 4px 8px rgba(9,111,200,.3);
    }
    .agent-mock__pin.is-dark { background: var(--c-brand-deep); }
    .agent-mock__pin.is-green { background: #28C840; }

    /* Card-specific layouts */
    /* 1. ターゲットリスト */
    .am-list .agent-mock__card { padding: 0.4375rem 0.5rem; gap: 0.1875rem; }
    /* 2. メッセージ */
    .am-msg .agent-mock__card { gap: 0.3125rem; }
    /* 3. マルチチャネル */
    .am-channels { width: 82%; }
    .am-channels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3125rem; }
    .am-channels__grid .agent-mock__icon { width: 100%; height: 1.625rem; border-radius: 0.3125rem; }
    /* 4. クリエイティブ制作 (LP/WP/LINE) */
    .am-stack { display: grid; gap: 0.3125rem; position: relative; }
    .am-stack__sheet {
      background: #fff; border: 1px solid #E4E7EC; border-radius: 0.375rem;
      padding: 0.4375rem; display: grid; gap: 0.25rem;
    }
    .am-stack__sheet--hi { transform: translateY(-2px); border-color: rgba(9,111,200,.4); }
    /* 5. インテント検知 */
    .am-signal { position: relative; width: 100%; display: grid; place-items: center; }
    .am-signal__core {
      width: 2.5rem; height: 2.5rem; border-radius: 50%;
      background: var(--c-brand); color: #fff;
      display: grid; place-items: center;
      font-family: var(--f-en); font-size: 0.5625rem; font-weight: 800;
      box-shadow: 0 6px 14px rgba(9,111,200,.3);
      z-index: 2;
    }
    .am-signal__ring {
      position: absolute; top: 50%; left: 50%;
      width: 4rem; height: 4rem;
      border-radius: 50%;
      border: 1px solid rgba(9,111,200,.35);
      transform: translate(-50%, -50%);
      animation: amSignalPulse 2.4s ease-out infinite;
    }
    .am-signal__ring:nth-child(2) { animation-delay: .8s; }
    .am-signal__ring:nth-child(3) { animation-delay: 1.6s; }
    @keyframes amSignalPulse {
      0%   { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
    }
    .am-signal__node {
      position: absolute;
      width: 0.6875rem; height: 0.6875rem;
      border-radius: 50%;
      background: #fff;
      border: 1.5px solid var(--c-brand);
      z-index: 3;
    }
    .am-signal__node--a { top: 18%; left: 22%; }
    .am-signal__node--b { top: 22%; right: 18%; }
    .am-signal__node--c { bottom: 22%; left: 28%; }
    .am-signal__node--d { bottom: 18%; right: 24%; }
    /* 6. AI 返信 */
    .am-chat .agent-mock__card { gap: 0.3125rem; padding: 0.5rem 0.625rem; }
    .am-chat__bubble {
      max-width: 80%;
      padding: 0.3125rem 0.5rem;
      border-radius: 0.4375rem;
      font-family: var(--f-en);
      font-size: 0.4375rem;
      letter-spacing: 0.08em;
    }
    .am-chat__bubble.is-ai { background: var(--c-brand); color: #fff; align-self: flex-start; border-bottom-left-radius: 0.125rem; }
    .am-chat__bubble.is-user { background: #F4F6F9; color: var(--c-text); align-self: flex-end; border-bottom-right-radius: 0.125rem; }
    .am-chat__col { display: flex; flex-direction: column; gap: 0.25rem; }
    /* 7. 予約 calendar */
    .am-cal__grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.1875rem;
    }
    .am-cal__cell {
      height: 0.6875rem;
      background: #F4F6F9; border-radius: 0.1875rem;
    }
    .am-cal__cell.is-booked {
      background: var(--c-brand);
      box-shadow: 0 0 0 2px rgba(9,111,200,.15);
    }
    .am-cal__cell.is-pending {
      background: rgba(9,111,200,.15);
    }
    /* 8. 改善ループ */
    .am-loop {
      width: 90%;
      display: grid;
      gap: 0.375rem;
    }
    .am-loop__chart {
      height: 2.75rem;
      background: linear-gradient(180deg, rgba(9,111,200,.1), transparent);
      border-radius: 0.375rem;
      position: relative;
      overflow: hidden;
    }
    .am-loop__chart::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top right, transparent 49%, var(--c-brand) 49%, var(--c-brand) 51%, transparent 51%);
      clip-path: polygon(0 80%, 14% 70%, 28% 65%, 42% 50%, 56% 45%, 70% 30%, 84% 25%, 100% 10%, 100% 100%, 0 100%);
      background: linear-gradient(180deg, rgba(9,111,200,.55), rgba(9,111,200,.15));
    }
    .am-loop__chart::after {
      content: '';
      position: absolute;
      inset: 0;
      border-bottom: 1px dashed rgba(15,20,25,.18);
    }
    .am-loop__delta {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.1875rem 0.4375rem;
      background: rgba(40,200,64,.12);
      color: #128A5C;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 800;
      border-radius: 999px;
      align-self: flex-end;
      width: fit-content;
      justify-self: end;
    }

    /* ============================================
       Service — PDCA Wheel (円形：中心featured card + 4方向の小カード)
       ============================================ */
    .pdca {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pdca__wheel {
      position: relative;
      width: 100%;
      max-width: 36rem;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
    }
    /* SVG リング */
    .pdca__svg {
      display: block;
      position: absolute;
      inset: 18%;
      width: 64%;
      height: 64%;
      pointer-events: none;
      overflow: visible;
    }
    .pdca__svg-ring {
      display: block;
      fill: none;
      stroke: rgba(15,20,25,.14);
      stroke-width: 1;
      stroke-dasharray: 4 6;
    }
    .pdca__svg-progress {
      display: block;
      fill: none;
      stroke: var(--c-brand);
      stroke-width: 2;
      stroke-linecap: round;
      transition: stroke-dashoffset .8s var(--ease-out), stroke-dasharray .8s var(--ease-out);
    }
    /* 中心 featured card (blue gradient) */
    .pdca__hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 52%;
      aspect-ratio: 1.1 / 1;
      border-radius: 1.5rem;
      background: linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 50%, #4A95E0 100%);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1.5rem 1.625rem 1.75rem;
      box-shadow:
        0 30px 60px -20px rgba(9, 111, 200, .55),
        0 0 0 1px rgba(255, 255, 255, .12) inset;
      overflow: hidden;
      z-index: 2;
    }
    .pdca__hub::before {
      content: '◉ AI AGENT';
      position: absolute;
      top: 1.125rem;
      left: 1.625rem;
      font-family: var(--f-en);
      font-size: 0.5625rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      color: rgba(255, 255, 255, .9);
      background: rgba(255, 255, 255, .18);
      padding: 0.3125rem 0.625rem;
      border-radius: 999px;
      backdrop-filter: blur(10px);
      white-space: nowrap;
      z-index: 2;
    }
    .pdca__hub::after {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 70%;
      height: 80%;
      background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
      pointer-events: none;
    }
    .pdca__hub > div {
      position: relative;
      z-index: 1;
      margin-top: 1.5rem;
    }
    .pdca__hub-i {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.26em;
      color: rgba(255,255,255,.7);
      margin-bottom: 0.5rem;
      transition: opacity .4s var(--ease-out);
    }
    .pdca__hub-t {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: clamp(1.875rem, 4.2vw, 2.625rem);
      letter-spacing: -0.015em;
      line-height: 1;
      margin-bottom: 0.625rem;
      color: #fff;
      transition: opacity .4s var(--ease-out);
    }
    .pdca__hub-sub {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,.92);
      line-height: 1.6;
      max-width: 22ch;
      transition: opacity .4s var(--ease-out);
    }
    /* .pdca__steps はラッパーで実質 display: contents (子を絶対配置) */
    .pdca__steps {
      display: contents;
    }

    /* AI agent commentary bubble (右上に浮遊する吹き出し) */
    .pdca__bubble {
      position: absolute;
      top: 4%;
      right: -4%;
      max-width: 11rem;
      padding: 0.625rem 0.875rem 0.625rem 0.75rem;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 0.875rem;
      box-shadow: 0 12px 28px -12px rgba(9,111,200,.25);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      z-index: 4;
      animation: pdcaBubbleFloat 4s var(--ease-soft) infinite;
    }
    .pdca__bubble::after {
      /* tail pointing toward hub (lower-left of bubble) */
      content: '';
      position: absolute;
      bottom: -6px;
      left: 1.25rem;
      width: 12px;
      height: 12px;
      background: #fff;
      border-right: 1px solid var(--c-line);
      border-bottom: 1px solid var(--c-line);
      transform: rotate(45deg);
    }
    .pdca__bubble-avatar {
      flex-shrink: 0;
      width: 1.375rem;
      height: 1.375rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand) 60%, #3F9EE3);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      box-shadow: 0 2px 6px rgba(9,111,200,.35);
    }
    .pdca__bubble-text {
      font-family: var(--f-ja);
      font-weight: 600;
      font-size: 0.6875rem;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--c-text);
      transition: opacity .4s var(--ease-out);
    }
    .pdca__bubble-typing {
      display: inline-flex;
      gap: 0.1875rem;
      align-items: center;
      margin-left: 0.1875rem;
    }
    .pdca__bubble-typing span {
      width: 0.25rem; height: 0.25rem;
      border-radius: 50%;
      background: var(--c-brand);
      animation: pdcaBubbleTyping 1.2s ease-in-out infinite;
    }
    .pdca__bubble-typing span:nth-child(2) { animation-delay: .15s; }
    .pdca__bubble-typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes pdcaBubbleTyping {
      0%, 60%, 100% { transform: translateY(0); opacity: .35; }
      30%           { transform: translateY(-2px); opacity: 1; }
    }
    @keyframes pdcaBubbleFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    /* 4方向の小カード (compass positions) */
    .pdca__card {
      position: absolute;
      width: 22%;
      padding: 0.75rem 0.875rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out),
                  scale .4s var(--ease-out), box-shadow .4s var(--ease-out);
      z-index: 3;
    }
    .pdca__card[data-pdca="0"] { top: 0;    left: 50%; translate: -50% 0; }            /* 12時 PLAN */
    .pdca__card[data-pdca="1"] { top: 50%; right: 0;   translate: 0 -50%; }            /* 3時 DO */
    .pdca__card[data-pdca="2"] { bottom: 0; left: 50%; translate: -50% 0; }            /* 6時 CHECK */
    .pdca__card[data-pdca="3"] { top: 50%; left: 0;    translate: 0 -50%; }            /* 9時 ACT */
    .pdca__card-i {
      font-family: var(--f-en);
      font-size: 0.5625rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: var(--c-text-mute);
      flex-shrink: 0;
    }
    .pdca__card-k {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 0.875rem;
      letter-spacing: -0.005em;
      color: var(--c-text);
      line-height: 1;
    }
    .pdca__card-sub {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      color: var(--c-text-mute);
    }
    .pdca__card-d { display: none; }
    .pdca__card.is-active {
      background: #fff;
      border-color: var(--c-brand);
      box-shadow: 0 12px 28px -12px rgba(9,111,200,.4), 0 0 0 4px rgba(9,111,200,.10);
      scale: 1.08;
    }
    .pdca__card.is-active .pdca__card-i { color: var(--c-brand); }
    .pdca__card.is-active .pdca__card-k { color: var(--c-brand); }
    .pdca__card.is-active .pdca__card-sub { color: var(--c-brand-deep); }

    /* 斜め方向の矢印 (NE/SE/SW/NW) */
    .pdca__arrow {
      display: grid;
      position: absolute;
      width: 1.5rem; height: 1.5rem;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--c-line);
      color: var(--c-text-sub);
      font-family: var(--f-en);
      font-size: 0.6875rem;
      pointer-events: none;
      z-index: 1;
    }
    .pdca__arrow--ne { top: 22%;    right: 22%; }
    .pdca__arrow--se { bottom: 22%; right: 22%; }
    .pdca__arrow--sw { bottom: 22%; left: 22%;  }
    .pdca__arrow--nw { top: 22%;    left: 22%;  }

    /* Carousel nav */
    .pdca__nav {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2.5rem;
      gap: 1.5rem;
    }
    .pdca__nav-info {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .pdca__nav-progress {
      width: 8rem;
      height: 2px;
      background: var(--c-line);
      border-radius: 999px;
      overflow: hidden;
    }
    .pdca__nav-progress-bar {
      height: 100%;
      width: 25%;
      background: var(--c-text);
      transition: width .55s var(--ease-out);
    }
    .pdca__nav-count {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--c-text-mute);
    }
    .pdca__nav-count strong { color: var(--c-text); font-weight: 700; }
    .pdca__nav-buttons { display: inline-flex; gap: 0.5rem; }
    .pdca__nav-btn {
      width: 2.25rem; height: 2.25rem;
      display: grid; place-items: center;
      background: transparent;
      border: 1px solid var(--c-line);
      border-radius: 50%;
      color: var(--c-text);
      font-family: var(--f-en);
      font-weight: 400;
      cursor: pointer;
      transition: background-color .2s, border-color .2s, color .2s;
    }
    .pdca__nav-btn:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }

    /* ============================================
       Growth — Wheel + Compounding storytelling
       ============================================ */
    .growth {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 2.5rem;
      align-items: stretch;
    }
    .growth__visual { position: relative; display: flex; flex-direction: column; }
    .growth__story {
      display: grid;
      grid-auto-rows: auto;
      gap: 1rem;
      align-content: center;
    }
    .growth-step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1.5rem;
      padding: 1.75rem 2rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
      align-items: center;
    }
    .growth-step:hover {
      transform: translateX(4px);
      border-color: var(--c-brand);
      box-shadow: 0 12px 32px -16px rgba(9,111,200,.25);
    }
    .growth-step__num {
      font-family: var(--f-en);
      font-size: 2.125rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--c-brand);
      line-height: 1;
      align-self: center;
    }
    .growth-step__t {
      font-family: var(--f-ja-bold);
      font-size: 1.0625rem;
      font-weight: 800;
      color: var(--c-text);
      letter-spacing: 0.06em;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
    .growth-step__t em { font-style: normal; color: var(--c-brand); }
    .growth-step__d {
      font-family: var(--f-ja);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.85;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      margin: 0;
    }

    /* Compounding 4 metric tiles */
    .growth-tiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-top: 3rem;
    }
    .growth-tile {
      padding: 1.5rem 1.5rem 1.75rem;
      background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%);
      color: #fff;
      border-radius: 1rem;
      display: grid;
      gap: 0.625rem;
      align-content: start;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px -10px rgba(9, 111, 200, .35);
    }
    /* Soft gloss highlight on top */
    .growth-tile::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    }
    /* AI Agent badge on each gradient tile */
    .growth-tile:not(:nth-child(2)):not(:nth-child(3))::after {
      content: '◉ AI';
      position: absolute;
      top: 1.1rem;
      right: 1.1rem;
      font-family: var(--f-en);
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: rgba(255, 255, 255, .85);
      background: rgba(255, 255, 255, .14);
      padding: 0.18rem 0.45rem;
      border-radius: 999px;
      backdrop-filter: blur(8px);
    }
    .growth-tile:nth-child(2),
    .growth-tile:nth-child(3) {
      background: var(--c-surface);
      color: var(--c-text);
      border: 1px solid var(--c-line);
    }
    .growth-tile__label {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,.55);
      text-transform: uppercase;
    }
    .growth-tile:nth-child(2) .growth-tile__label,
    .growth-tile:nth-child(3) .growth-tile__label { color: var(--c-text-mute); }
    .growth-tile__n {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 2rem;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .growth-tile__n em { font-style: normal; color: var(--c-brand); }
    /* When the tile background is brand gradient, switch em color so it stays readable */
    .growth-tile:not(:nth-child(2)):not(:nth-child(3)) .growth-tile__n em {
      color: #FFC8BD;  /* light coral on brand blue */
    }
    .growth-tile__d {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.75;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,.7);
    }
    .growth-tile:nth-child(2) .growth-tile__d,
    .growth-tile:nth-child(3) .growth-tile__d { color: var(--c-text-sub); }

    .service-feature {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1.5rem;
      align-items: center;
      padding: 1.75rem 2rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      margin-top: 2rem;
    }
    .service-feature__sym {
      width: 2.5rem; height: 2.5rem;
      display: grid; place-items: center;
      font-size: 1.125rem;
      color: var(--c-brand);
      background: rgba(9,111,200,.06);
      border-radius: 0.625rem;
      line-height: 1;
    }
    .service-feature__title { font-family: var(--f-ja-bold); font-weight: 700; font-size: 1rem; line-height: 1.55; letter-spacing: 0.02em; color: var(--c-text); margin-bottom: 0.4375rem; }
    .service-feature__desc { font-family: var(--f-ja); font-weight: 500; font-size: 0.8125rem; line-height: 1.85; letter-spacing: 0.02em; color: var(--c-text-sub); }

    /* ============================================
       Comparison Table — 営業代行 vs AI Sales Agent
       ============================================ */
    .compare {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      position: relative;
      display: grid;
      gap: 0.625rem;
    }
    /* Header bar */
    .compare__head {
      display: grid;
      grid-template-columns: 0.85fr 1fr 1fr 1.15fr;
      gap: 0.625rem;
      align-items: stretch;
      padding: 0;
      border-bottom: 0;
    }
    .compare__head-cell {
      padding: 1.625rem 1.875rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
    }
    .compare__head-cell:first-child {
      background: transparent;
      border: 0;
      padding-left: 0;
    }
    .compare__head-cell--ours {
      background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%);
      color: #fff;
      border-color: transparent;
      position: relative;
      box-shadow: 0 24px 50px -16px rgba(9,111,200,.45);
    }
    .compare__head-cell--ours::before {
      content: '◉  当社のサービス';
      position: absolute;
      top: -0.75rem;
      right: 1.25rem;
      padding: 0.4375rem 1rem;
      background: #FFFFFF;
      color: var(--c-brand-deep);
      font-family: var(--f-ja-bold);
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      border-radius: 999px;
      box-shadow:
        0 8px 20px -4px rgba(9,111,200,.4),
        0 0 0 4px rgba(255,255,255,.6);
      white-space: nowrap;
    }
    .compare__cat {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      color: var(--c-text-mute);
      text-transform: uppercase;
    }
    .compare__head-cell--ours .compare__cat { color: rgba(255,255,255,.55); }
    .compare__name {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.25rem;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: var(--c-text);
    }
    .compare__head-cell:first-child .compare__name {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 1.0625rem;
      letter-spacing: 0.04em;
    }
    .compare__head-cell--ours .compare__name {
      color: #fff;
      font-family: var(--f-en);
      font-weight: 700;
      letter-spacing: -0.01em;
      font-size: 1.375rem;
    }

    /* Row */
    .compare__row {
      display: grid;
      grid-template-columns: 0.85fr 1fr 1fr 1.15fr;
      gap: 0.625rem;
      align-items: stretch;
      transition: transform .3s var(--ease-out);
    }
    .compare__row:hover .compare__row-cell--ours {
      box-shadow: 0 16px 40px -22px rgba(9,111,200,.4);
    }
    .compare__row-cell {
      padding: 1.375rem 1.875rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      font-family: var(--f-ja);
      font-weight: 600;
      font-size: 0.875rem;
      line-height: 1.7;
      letter-spacing: 0.04em;
      color: var(--c-text);
      display: flex;
      align-items: center;
      gap: 0.875rem;
    }
    .compare__row-cell:first-child {
      background: transparent;
      border: 0;
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: 0.9375rem;
      color: var(--c-text);
      padding-left: 0;
      letter-spacing: 0.06em;
    }
    .compare__row-cell--ours {
      background: linear-gradient(135deg, rgba(9,111,200,.04), rgba(118,183,237,.04));
      border-color: rgba(9,111,200,.18);
      position: relative;
      transition: box-shadow .3s var(--ease-out);
    }
    .compare__row-cell--ours::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: var(--c-brand);
      border-radius: 0 999px 999px 0;
    }
    .compare__row-cell--ours strong {
      color: var(--c-brand);
      font-weight: 900;
    }

    /* SVG status icon */
    .compare__icon {
      flex-shrink: 0;
      width: 1.5rem; height: 1.5rem;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
    }
    .compare__icon svg { width: 0.75rem; height: 0.75rem; }
    /* Unified neutral tones — single brand-led palette */
    .compare__icon--bad {
      background: #F1F3F6;
      color: #8A92A2;
    }
    .compare__icon--mid {
      background: #E8F2FC;
      color: var(--c-brand);
    }
    .compare__icon--good {
      background: rgba(9,111,200,.14);
      color: var(--c-brand-deep);
    }
    .compare__row-cell--ours .compare__icon--good {
      background: var(--c-brand);
      color: #fff;
      box-shadow: 0 4px 10px -2px rgba(9,111,200,.40);
    }

    /* Insight callout — 構造的デメリット → AI が解決 */
    .compare-insight {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1rem;
      margin-top: 2.5rem;
    }
    .compare-insight__item {
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      padding: 1.625rem 1.75rem 1.75rem;
      display: grid;
      gap: 0.625rem;
      align-content: start;
      position: relative;
      overflow: hidden;
    }
    .compare-insight__item--ours {
      background: linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 55%, #3F9EE3 100%);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 22px 50px -16px rgba(9,111,200,.5);
    }
    .compare-insight__item--ours::before {
      content: '';
      position: absolute;
      top: -6rem; right: -4rem;
      width: 16rem; height: 16rem;
      background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
      pointer-events: none;
    }
    .compare-insight__tag {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--c-text-mute);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
    }
    .compare-insight__tag::before {
      content: '';
      width: 1.125rem; height: 1px;
      background: var(--c-text-mute);
    }
    .compare-insight__item--ours .compare-insight__tag {
      color: rgba(255,255,255,.55);
    }
    .compare-insight__item--ours .compare-insight__tag::before {
      background: rgba(255,255,255,.4);
    }
    .compare-insight__t {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.0625rem;
      line-height: 1.6;
      letter-spacing: 0.04em;
      color: var(--c-text);
      position: relative;
      z-index: 1;
    }
    .compare-insight__item--ours .compare-insight__t { color: #fff; }
    .compare-insight__t em {
      font-style: normal;
      color: var(--c-brand);
      font-weight: 900;
    }
    .compare-insight__item--ours .compare-insight__t em {
      color: #76B7ED;
    }
    .compare-insight__d {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      margin: 0;
      position: relative;
      z-index: 1;
    }
    .compare-insight__item--ours .compare-insight__d {
      color: rgba(255,255,255,.72);
    }

    /* ============================================
       Asset Numbers — 4 axes
       ============================================ */
    .assets {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      background: var(--c-surface);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-rest);
      overflow: hidden;
    }
    .asset {
      padding: 3rem 2rem;
      text-align: left;
      position: relative;
      transition: background-color .4s var(--ease-out);
    }
    .asset:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 25%; right: 0;
      width: 1px; height: 50%;
      background: var(--c-line);
    }
    .asset__num {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: clamp(2.5rem, 4.6vw, 4rem);
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--c-text);
      display: block;
      margin-bottom: 0.875rem;
    }
    .asset__num .unit {
      font-family: var(--f-en);
      font-size: 0.32em;
      font-weight: 700;
      color: var(--c-brand);
      margin-left: 0.2em;
      letter-spacing: 0;
    }
    .asset__num--accent { color: var(--c-brand); }
    .asset__label {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 0.8125rem;
      letter-spacing: 0.12em;
      color: var(--c-text);
      margin-bottom: 0.5rem;
    }
    .asset__desc {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.85;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
    }

    /* ============================================
       Reason — 4 items
       ============================================ */
    .reason-list { display: grid; gap: 1.25rem; }
    .rli {
      background: var(--c-surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-rest);
      padding: 2rem 2.5rem;
      display: grid;
      grid-template-columns: 5rem 1fr 5rem;
      gap: 2rem;
      align-items: center;
      transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
      cursor: auto;
    }
    .rli:hover { transform: translateX(6px); box-shadow: var(--shadow-hover); }
    .rli__num { font-family: var(--f-en); font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--c-brand); }
    .rli__t { font-family: var(--f-ja-bold); font-weight: 900; font-size: 1.125rem; line-height: 1.55; letter-spacing: 0.06em; color: var(--c-text); margin-bottom: 0.75rem; }
    .rli__d { font-family: var(--f-ja); font-weight: 500; font-size: 0.8125rem; line-height: 2; letter-spacing: 0.04em; color: var(--c-text-sub); max-width: 48em; }
    .rli__icon { width: 4rem; height: 4rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(9,111,200,.08) 0%, rgba(118,183,237,.08) 100%); border: 1px solid rgba(9,111,200,.12); display: grid; place-items: center; color: var(--c-brand); justify-self: end; }
    .rli__icon svg { width: 2rem; height: 2rem; }

    /* ============================================
       Coverage Matrix — 業種・業態・規模 問わず
       ============================================ */
    .coverage {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .coverage::before {
      content: '';
      position: absolute;
      top: -8rem; right: -6rem;
      width: 20rem; height: 20rem;
      background: radial-gradient(circle, rgba(9,111,200,.08), transparent 60%);
      pointer-events: none;
    }
    .coverage__head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 2rem;
      padding: 2.5rem 2.75rem 1.75rem;
      border-bottom: 1px solid var(--c-line);
    }
    .coverage__claim {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.5rem;
      line-height: 1.4;
      letter-spacing: 0.04em;
      color: var(--c-text);
    }
    .coverage__claim em {
      font-style: normal;
      color: var(--c-brand);
    }
    .coverage__metric {
      display: inline-flex;
      align-items: baseline;
      gap: 0.625rem;
      padding: 0.625rem 1.125rem;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 999px;
    }
    .coverage__metric-n {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 1.25rem;
      letter-spacing: -0.02em;
      color: var(--c-brand);
      line-height: 1;
    }
    .coverage__metric-l {
      font-family: var(--f-ja);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--c-text-sub);
      letter-spacing: 0.04em;
    }
    .coverage__matrix {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .coverage__col {
      padding: 2rem 2.25rem;
      border-right: 1px solid var(--c-line);
      display: grid;
      gap: 1rem;
      align-content: start;
    }
    .coverage__col:last-child { border-right: 0; }
    .coverage__col-head {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
    }
    .coverage__col-num {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 0.6875rem;
      letter-spacing: 0.24em;
      color: var(--c-brand);
    }
    .coverage__col-t {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: 0.06em;
      color: var(--c-text);
    }
    .coverage__col-d {
      font-family: var(--f-ja);
      font-size: 0.75rem;
      line-height: 1.85;
      color: var(--c-text-sub);
      letter-spacing: 0.04em;
    }
    .coverage__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4375rem;
      margin-top: 0.25rem;
    }
    .coverage__chip {
      font-family: var(--f-ja);
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      color: var(--c-text);
      background: #fff;
      border: 1px solid var(--c-line);
      padding: 0.4375rem 0.75rem;
      border-radius: 999px;
      transition: background-color .25s, border-color .25s, color .25s;
    }
    .coverage__chip:hover {
      background: var(--c-brand);
      border-color: var(--c-brand);
      color: #fff;
    }
    .coverage__chip--more {
      background: transparent;
      border-style: dashed;
      color: var(--c-text-mute);
    }
    .coverage__foot {
      padding: 1.75rem 2.75rem;
      background: #fff;
      border-top: 1px solid var(--c-line);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.5rem;
      align-items: center;
    }
    .coverage__foot-t {
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--c-text);
      letter-spacing: 0.04em;
      line-height: 1.7;
    }
    .coverage__foot-t em {
      font-style: normal;
      color: var(--c-brand);
      font-weight: 900;
    }
    .coverage__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.875rem 1.5rem;
      background: var(--c-brand);
      color: #fff;
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      border-radius: 999px;
      transition: transform .2s var(--ease-spring), box-shadow .2s;
    }
    .coverage__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -10px rgba(9,111,200,.45);
    }

    /* Mid-page CTA — Goodpatch style (dark, asymmetric) */
    .mid-cta {
      max-width: var(--container);
      margin: 5rem auto;
      padding: 3.25rem 3.5rem;
      background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%);
      color: #fff;
      border-radius: 1.5rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3.5rem;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px -22px rgba(9,111,200,.40);
    }
    .mid-cta::before {
      content: '';
      position: absolute;
      top: -10rem; right: -8rem;
      width: 26rem; height: 26rem;
      background: radial-gradient(circle, rgba(9,111,200,.32), transparent 60%);
      pointer-events: none;
    }
    .mid-cta::after {
      content: '';
      position: absolute;
      bottom: 0; left: 3.5rem; right: 3.5rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    }
    .mid-cta__head {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 1.125rem;
    }
    .mid-cta__eyebrow {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      color: rgba(255,255,255,.55);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.875rem;
    }
    .mid-cta__eyebrow::before {
      content: '';
      width: 2rem; height: 1px;
      background: rgba(255,255,255,.4);
    }
    .mid-cta__title {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      line-height: 1.45;
      letter-spacing: 0.04em;
      color: #fff;
      margin-bottom: 0;
    }
    .mid-cta__title em {
      font-style: normal;
      color: #76B7ED;
    }
    .mid-cta__sub {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.9375rem;
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,.72);
      max-width: 36rem;
      margin: 0;
    }
    .mid-cta__action {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0.875rem;
      justify-items: end;
    }
    .mid-cta__btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.875rem 0.875rem 0.875rem 2rem;
      background: #fff;
      color: var(--c-text);
      font-family: var(--f-ja-bold);
      font-weight: 800;
      font-size: 0.9375rem;
      letter-spacing: 0.06em;
      border-radius: 999px;
      transition: transform .25s var(--ease-spring), box-shadow .25s;
      box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
    }
    .mid-cta__btn-arrow {
      width: 2.625rem;
      height: 2.625rem;
      border-radius: 50%;
      background: var(--c-brand);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: var(--f-en);
      font-size: 1rem;
      transition: transform .25s var(--ease-spring);
    }
    .mid-cta__btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 36px -10px rgba(0,0,0,.55);
    }
    .mid-cta__btn:hover .mid-cta__btn-arrow {
      transform: translateX(4px);
    }
    .mid-cta__meta {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,.5);
      text-transform: uppercase;
    }
    .mid-cta__meta-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #28C840;
      box-shadow: 0 0 0 4px rgba(40,200,64,.18);
    }

    /* ============================================
       Pricing — Boarding Pass
       ============================================ */
    .pricing-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: stretch; }

    .ticket {
      background: linear-gradient(135deg, var(--c-dark-1) 0%, var(--c-dark-2) 50%, var(--c-dark-3) 100%);
      border-radius: var(--radius-xl);
      overflow: hidden;
      color: #fff;
      display: grid;
      grid-template-columns: 6rem 1fr;
      position: relative;
      box-shadow: 0 30px 60px -20px rgba(9,111,200,.20);
    }
    .ticket::before { content: ''; position: absolute; top: 20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(118,183,237,.30), transparent 60%); filter: blur(50px); animation: ctaGlow 10s var(--ease-soft) infinite; }
    @keyframes ctaGlow { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
    .ticket > * { position: relative; z-index: 1; }
    .ticket__stub { writing-mode: vertical-rl; transform: rotate(180deg); padding: 1.5rem 0.75rem; background: rgba(255,255,255,.05); border-right: 1px dashed rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
    .ticket__stub-label { font-family: var(--f-en); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.3em; color: rgba(255,255,255,.5); text-transform: uppercase; }
    .ticket__stub-name { font-family: var(--f-en); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; color: #fff; }
    .ticket__stub-tag { font-family: var(--f-ja-bold); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.12em; color: #FFFFFF; }
    .ticket__perf { padding: 1.75rem 2rem 1.625rem; }
    .ticket__tag { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.35rem 0.75rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; font-family: var(--f-en); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.22em; color: #FFFFFF; text-transform: uppercase; margin-bottom: 0.75rem; }
    .ticket__name { font-family: var(--f-ja-bold); font-weight: 900; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.35; letter-spacing: 0.03em; color: #fff; margin-bottom: 0.5rem; }
    .ticket__desc { font-family: var(--f-ja); font-weight: 500; font-size: 0.75rem; line-height: 1.75; letter-spacing: 0.04em; color: rgba(255,255,255,.82); margin-bottom: 0.875rem; max-width: 32em; }
    .ticket__price { display: flex; align-items: baseline; gap: 0.25rem; padding: 0.75rem 0; border-top: 1px dashed rgba(255,255,255,.18); border-bottom: 1px dashed rgba(255,255,255,.18); margin-bottom: 0.875rem; }
    .ticket__price-cur { font-family: var(--f-en); font-weight: 700; font-size: 1.25rem; color: #FFFFFF; }
    .ticket__price-num { font-family: var(--f-en); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.875rem); letter-spacing: -0.03em; color: #fff; line-height: 1; }
    .ticket__price-unit { font-family: var(--f-en); font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: 0.04em; margin-left: 0.5rem; }
    .ticket__list { list-style: none; display: grid; gap: 0.3125rem; margin-bottom: 1.125rem; }
    .ticket__list li { font-family: var(--f-ja); font-weight: 500; font-size: 0.75rem; line-height: 1.55; letter-spacing: 0.04em; color: rgba(255,255,255,.85); padding-left: 1rem; position: relative; }
    .ticket__list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 0.5625rem; height: 1px; background: #FFFFFF; opacity: .7; }
    .ticket__list li b { color: #fff; font-weight: 900; }
    .ticket__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; padding: 0.875rem 1.25rem; background: #fff; color: var(--c-brand-deep); font-family: var(--f-ja-bold); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.08em; border-radius: var(--radius-pill); transition: transform .35s var(--ease-spring), box-shadow .35s; box-shadow: 0 8px 22px rgba(0,0,0,.20); }
    .ticket__btn::after { content: '→'; transition: transform .35s var(--ease-spring); }
    .ticket__btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(255,255,255,.25); }
    .ticket__btn:hover::after { transform: translateX(5px); }

    .price-side { display: grid; gap: 0.75rem; }
    .ps-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 1.375rem 1.5rem; box-shadow: var(--shadow-rest); display: grid; gap: 0.5rem; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
    .ps-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .ps-card__icon {
      width: 2.5rem; height: 2.5rem;
      border-radius: 0.625rem;
      background: linear-gradient(135deg, rgba(9,111,200,.10) 0%, rgba(118,183,237,.10) 100%);
      border: 1px solid rgba(9,111,200,.18);
      display: grid; place-items: center;
      color: var(--c-brand);
      position: relative;
      overflow: hidden;
      transition: transform .35s var(--ease-spring), box-shadow .35s, background .35s;
    }
    .ps-card__icon::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
      animation: psIconSheen 4.5s var(--ease-soft) infinite;
      pointer-events: none;
    }
    @keyframes psIconSheen {
      0%, 100% { transform: translateX(-110%); opacity: 0; }
      35%      { opacity: 1; }
      65%      { opacity: 1; }
      100%     { transform: translateX(110%); opacity: 0; }
    }
    .ps-card:hover .ps-card__icon {
      transform: translateY(-2px) scale(1.06);
      background: linear-gradient(135deg, var(--c-brand) 0%, #3F9EE3 100%);
      color: #fff;
      box-shadow: 0 10px 22px -10px rgba(9,111,200,.5);
    }
    .ps-card__icon svg { width: 1.375rem; height: 1.375rem; position: relative; z-index: 1; }
    /* Individual icon animations */
    .ps-card:nth-of-type(1) .ps-card__icon svg { animation: psIconBox 3.2s var(--ease-soft) infinite; transform-origin: center; transform-box: fill-box; }
    .ps-card:nth-of-type(2) .ps-card__icon svg { animation: psIconCal 3.6s var(--ease-soft) infinite; transform-origin: center; transform-box: fill-box; }
    .ps-card:nth-of-type(3) .ps-card__icon svg { animation: psIconOpt 3.6s var(--ease-soft) infinite; transform-origin: center; transform-box: fill-box; }
    @keyframes psIconBox {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-2px) rotate(-3deg); }
    }
    @keyframes psIconCal {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-2px); }
    }
    @keyframes psIconOpt {
      0%, 100% { transform: rotate(0deg); }
      50%      { transform: rotate(8deg); }
    }
    .ps-card__t { font-family: var(--f-ja-bold); font-weight: 900; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.05em; color: var(--c-text); }
    .ps-card__d { font-family: var(--f-ja); font-weight: 500; font-size: 0.6875rem; line-height: 1.75; letter-spacing: 0.04em; color: var(--c-text-sub); }
    .ps-card__d b { font-weight: 900; color: var(--c-text); }
    .ps-card__link { font-family: var(--f-en); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--c-brand); text-transform: uppercase; transition: gap .25s var(--ease-spring); display: inline-flex; align-items: center; gap: 0.4375rem; }
    .ps-card__link:hover { gap: 0.75rem; }

    /* ============================================
       Flow timeline
       ============================================ */
    /* Timeline-style 3-column flow */
    /* ============================================
       FLOW — Horizontal scrollytelling track
       ============================================ */
    .flow-track {
      position: relative;
      height: 1440vh;
      margin-top: 1rem;
    }
    .flow-track__sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(ellipse 80% 60% at 80% 20%, rgba(63,158,227,.10), transparent 60%),
        radial-gradient(ellipse 70% 50% at 10% 90%, rgba(9,111,200,.08), transparent 60%),
        linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-warm) 100%);
    }
    /* HUD on top */
    .flow-track__hud {
      flex: 0 0 auto;
      padding: 1.5rem 3.5rem 1.25rem;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 2.25rem;
    }
    .flow-track__hud-left {
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      padding-left: 0.875rem;
      position: relative;
    }
    .flow-track__hud-left::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1875rem;
      bottom: 0.1875rem;
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--c-brand-deep), var(--c-brand));
    }
    .flow-track__hud-phase {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 0.875rem;
      letter-spacing: 0.22em;
      color: var(--c-brand-deep);
      text-transform: uppercase;
      transition: opacity .35s var(--ease-out);
    }
    .flow-track__hud-span { display: none; }
    .flow-track__hud-progress {
      position: relative;
      height: 4px;
      background: rgba(9,111,200,.10);
      border-radius: 4px;
    }
    .flow-track__hud-progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--c-brand-deep), var(--c-brand), #76B7ED);
      border-radius: 4px;
      box-shadow: 0 0 12px rgba(9,111,200,.4);
      transition: width .35s var(--ease-out);
    }
    .flow-track__hud-progress-tick {
      position: absolute;
      top: 50%;
      width: 10px;
      height: 10px;
      background: #FFFFFF;
      border: 2px solid var(--c-brand);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 2px 6px -2px rgba(9,111,200,.3);
    }
    .flow-track__hud-count {
      display: flex;
      align-items: baseline;
      gap: 0.25rem;
      font-family: var(--f-en);
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .flow-track__hud-count-current {
      font-size: 2.25rem;
      background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: opacity .35s var(--ease-out);
    }
    .flow-track__hud-count-sep {
      font-size: 1.25rem;
      color: var(--c-text-mute);
      opacity: .4;
    }
    .flow-track__hud-count-total {
      font-size: 1rem;
      color: var(--c-text-mute);
    }

    /* Strip: contains all step cards in a row */
    .flow-track__strip {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 0 4rem 3rem;
    }
    /* Each step card */
    .flow-step {
      flex: 0 0 calc(100vw - 8rem);
      max-width: 78rem;
      height: 78vh;
      max-height: 40rem;
      background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
      border: 1px solid rgba(9,111,200,.18);
      border-radius: 1.5rem;
      box-shadow: 0 24px 56px -24px rgba(9,111,200,.18);
      padding: 2.5rem 3rem;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      align-items: center;
      gap: 2rem;
      position: relative;
      overflow: hidden;
      transform: scale(.94);
      opacity: .35;
      transition: transform .55s var(--ease-spring), opacity .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .55s var(--ease-out);
    }
    .flow-step.is-active {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 32px 80px -28px rgba(9,111,200,.34);
      border-color: rgba(9,111,200,.40);
    }
    /* Subtle moving gradient backdrop */
    .flow-step::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 85% 15%, rgba(63,158,227,.10), transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(9,111,200,.06), transparent 50%);
      opacity: 0;
      transition: opacity .8s var(--ease-out);
      pointer-events: none;
    }
    .flow-step.is-active::before { opacity: 1; }
    .flow-step__num {
      position: absolute;
      top: 1.25rem;
      right: 2rem;
      font-family: var(--f-en);
      font-weight: 900;
      font-size: 18rem;
      line-height: 0.85;
      letter-spacing: -0.06em;
      background: linear-gradient(180deg, rgba(9,111,200,.10), rgba(63,158,227,.04));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }
    .flow-step__body {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
      max-width: 32rem;
      z-index: 1;
      position: relative;
    }
    /* Step label — vertical accent bar style (premium) */
    .flow-step__meta {
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      padding-left: 0.875rem;
      position: relative;
      width: fit-content;
    }
    .flow-step__meta::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1875rem;
      bottom: 0.1875rem;
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--c-brand-deep), var(--c-brand));
    }
    .flow-step__phase {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 0.625rem;
      letter-spacing: 0.26em;
      color: var(--c-text-mute);
      text-transform: uppercase;
      line-height: 1;
    }
    .flow-step__phase-name {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 1.125rem;
      letter-spacing: 0.12em;
      color: var(--c-brand-deep);
      text-transform: uppercase;
      line-height: 1.1;
      background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .flow-step__day { display: none; }
    .flow-step__t {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 2.625rem;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: var(--c-text);
      margin: 0;
    }
    .flow-step__d {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.9375rem;
      line-height: 2;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      margin: 0;
    }
    .flow-step__d strong {
      color: var(--c-brand-deep);
      font-weight: 800;
      background: linear-gradient(transparent 70%, rgba(9,111,200,.14) 70%);
    }
    .flow-step__dur { display: none; }
    .flow-step__milestone {
      align-self: flex-start;
      margin-top: 0.375rem;
      font-family: var(--f-ja-bold);
      font-size: 0.9375rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #FFFFFF;
      padding: 0.6875rem 1.375rem;
      background: linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 50%, #3F9EE3 100%);
      background-size: 200% 100%;
      background-position: 0% 50%;
      border-radius: 999px;
      box-shadow: 0 10px 28px -8px rgba(9,111,200,.45);
      animation: flowMilestoneShine 4s var(--ease-soft) infinite;
    }
    @keyframes flowMilestoneShine {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .flow-step__milestone--final {
      background: linear-gradient(135deg, var(--c-brand-deep) 0%, var(--c-brand) 50%, #76B7ED 100%);
      background-size: 200% 100%;
      box-shadow: 0 10px 28px -8px rgba(9,111,200,.5);
    }
    .flow-step__viz {
      width: 100%;
      max-width: 26rem;
      aspect-ratio: 6 / 5;
      justify-self: end;
      z-index: 1;
      position: relative;
    }
    .flow-step__viz svg { width: 100%; height: 100%; overflow: visible; }

    /* === Text reveal animation when card becomes active === */
    .flow-step__body > * {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .45s var(--ease-out), transform .45s var(--ease-spring);
    }
    .flow-step.is-active .flow-step__body > * { opacity: 1; transform: translateY(0); }
    .flow-step.is-active .flow-step__body > :nth-child(1) { transition-delay: .04s; }
    .flow-step.is-active .flow-step__body > :nth-child(2) { transition-delay: .10s; }
    .flow-step.is-active .flow-step__body > :nth-child(3) { transition-delay: .16s; }
    .flow-step.is-active .flow-step__body > :nth-child(4) { transition-delay: .22s; }

    /* === Visualization reveal === */
    .flow-step__viz {
      opacity: 0;
      transform: translateX(16px) scale(.97);
      transition: opacity .5s var(--ease-out), transform .55s var(--ease-spring);
    }
    .flow-step.is-active .flow-step__viz {
      opacity: 1;
      transform: translateX(0) scale(1);
      transition-delay: .1s;
    }

    /* Accent state (Step 04: milestone) — deeper blue */
    .flow-step--accent {
      background: linear-gradient(135deg, #F0F6FF 0%, #E3F0FC 100%);
      border-color: rgba(9,111,200,.35);
    }
    .flow-step--accent.is-active {
      box-shadow: 0 32px 80px -24px rgba(9,111,200,.45);
      border-color: var(--c-brand);
    }
    .flow-step--accent .flow-step__num {
      background: linear-gradient(180deg, rgba(9,111,200,.18), rgba(63,158,227,.08));
      -webkit-background-clip: text;
      background-clip: text;
    }
    /* Final state (Step 06: launch) — premium blue with subtle accent */
    .flow-step--final {
      background: linear-gradient(135deg, #FFFFFF 0%, #EAF3FD 100%);
      border-color: rgba(9,111,200,.35);
    }
    .flow-step--final.is-active {
      box-shadow: 0 32px 80px -24px rgba(9,111,200,.45);
      border-color: var(--c-brand);
    }
    .flow-step--final .flow-step__num {
      background: linear-gradient(180deg, rgba(9,111,200,.16), rgba(63,158,227,.06));
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* === SVG illustration animations (per step) === */
    @keyframes fsFadeUp {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes fsPulse {
      0%, 100% { opacity: .6; }
      50%      { opacity: 1; }
    }
    @keyframes fsBarGrow {
      0%   { transform: scaleY(0); }
      100% { transform: scaleY(1); }
    }
    @keyframes fsKnobSlide {
      0%   { transform: translateX(-30px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes fsCheckDraw {
      0%   { stroke-dashoffset: 30; }
      100% { stroke-dashoffset: 0; }
    }
    @keyframes fsRotate {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes fsDashOffset {
      0%   { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -20; }
    }
    @keyframes fsLineDraw {
      0%   { stroke-dashoffset: 200; }
      100% { stroke-dashoffset: 0; }
    }
    @keyframes fsCountUp {
      0%   { opacity: 0; transform: translateY(6px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Apply illustration animations only when active */
    .flow-step.is-active [data-anim="bubble"] {
      animation: fsFadeUp .4s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="bubble"]:nth-of-type(2) { animation-delay: .18s; }
    .flow-step.is-active [data-anim="bubble"]:nth-of-type(3) { animation-delay: .30s; }
    .flow-step.is-active [data-anim="bubble"]:nth-of-type(4) { animation-delay: .42s; }
    .flow-step.is-active [data-anim="bubble"]:nth-of-type(5) { animation-delay: .54s; }

    .flow-step.is-active [data-anim="bar"] {
      transform-origin: bottom center;
      transform-box: fill-box;
      animation: fsBarGrow .5s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="bar"]:nth-of-type(2) { animation-delay: .08s; }
    .flow-step.is-active [data-anim="bar"]:nth-of-type(3) { animation-delay: .16s; }
    .flow-step.is-active [data-anim="bar"]:nth-of-type(4) { animation-delay: .24s; }
    .flow-step.is-active [data-anim="bar"]:nth-of-type(5) { animation-delay: .32s; }

    .flow-step.is-active [data-anim="knob"] {
      animation: fsKnobSlide .5s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="knob"]:nth-of-type(2) { animation-delay: .12s; }
    .flow-step.is-active [data-anim="knob"]:nth-of-type(3) { animation-delay: .24s; }

    .flow-step.is-active [data-anim="check"] {
      stroke-dasharray: 30;
      animation: fsCheckDraw .5s var(--ease-soft) .25s backwards;
    }
    .flow-step.is-active [data-anim="seal"] {
      animation: fsFadeUp .45s var(--ease-spring) .1s backwards;
    }
    .flow-step.is-active [data-anim="kpi"] {
      animation: fsCountUp .4s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="kpi"]:nth-of-type(2) { animation-delay: .1s; }
    .flow-step.is-active [data-anim="kpi"]:nth-of-type(3) { animation-delay: .2s; }

    .flow-step.is-active [data-anim="line"] {
      stroke-dasharray: 200;
      animation: fsLineDraw .9s var(--ease-soft) .3s backwards;
    }
    .flow-step.is-active [data-anim="rotate"] {
      transform-origin: center;
      transform-box: fill-box;
      animation: fsRotate 12s linear infinite;
    }
    .flow-step.is-active [data-anim="orbit-dash"] {
      animation: fsDashOffset 1.5s linear infinite;
    }
    .flow-step.is-active [data-anim="pulse"] {
      animation: fsPulse 2.2s var(--ease-soft) infinite;
    }
    .flow-step.is-active [data-anim="orbit-node"] {
      animation: fsFadeUp .45s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="orbit-node"]:nth-of-type(2) { animation-delay: .12s; }
    .flow-step.is-active [data-anim="orbit-node"]:nth-of-type(3) { animation-delay: .24s; }
    .flow-step.is-active [data-anim="orbit-node"]:nth-of-type(4) { animation-delay: .36s; }
    .flow-step.is-active [data-anim="orbit-node"]:nth-of-type(5) { animation-delay: .48s; }

    .flow-step.is-active [data-anim="asset"] {
      animation: fsFadeUp .45s var(--ease-spring) backwards;
    }
    .flow-step.is-active [data-anim="asset"]:nth-of-type(2) { animation-delay: .1s; }
    .flow-step.is-active [data-anim="asset"]:nth-of-type(3) { animation-delay: .2s; }
    .flow-step.is-active [data-anim="asset"]:nth-of-type(4) { animation-delay: .3s; }

    /* Mobile: revert to vertical stack — no scroll-jacking */
    @media (max-width: 900px) {
      .flow-track { height: auto; margin-top: 0; }
      .flow-track__sticky {
        position: static;
        height: auto;
        overflow: visible;
        background: transparent;
      }
      .flow-track__hud { display: none; }
      .flow-track__strip {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
        transform: none !important;
      }
      .flow-step {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        padding: 1.5rem 1.75rem 1.75rem;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        transform: none;
        opacity: 1;
      }
      .flow-step__num {
        font-size: 8rem;
        right: 1rem;
        top: 0.5rem;
      }
      .flow-step__t { font-size: 1.5rem; }
      .flow-step__d { font-size: 0.875rem; }
      .flow-step__viz { display: none; }
    }

    /* ============================================
       FLOW (legacy) — Vertical progress timeline (unused, retained for ref)
       ============================================ */
    .flow-list {
      list-style: none;
      padding: 0;
      max-width: 60rem;
      margin: 0 auto;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    /* Phase header (PRE-LAUNCH / TEST / LAUNCH) */
    .flow-phase {
      display: grid;
      grid-template-columns: 8.5rem 3.5rem 1fr;
      align-items: center;
      gap: 0;
      padding: 1.75rem 0 1rem;
      position: relative;
    }
    .flow-phase:first-child { padding-top: 0; }
    .flow-phase__bar {
      grid-column: 2;
      justify-self: center;
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand));
      box-shadow: 0 0 0 6px rgba(9,111,200,.10);
      transform: rotate(45deg);
      position: relative;
      z-index: 2;
    }
    .flow-phase__label {
      grid-column: 3;
      margin-left: 1.5rem;
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 0.75rem;
      letter-spacing: 0.28em;
      color: var(--c-brand-deep);
      text-transform: uppercase;
    }
    .flow-phase__span {
      grid-column: 3;
      margin-left: 1.5rem;
      grid-row: 2;
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 0.6875rem;
      letter-spacing: 0.18em;
      color: var(--c-text-mute);
      margin-top: 0.25rem;
    }
    .flow-phase + .flow-item .flow-item__rail::before {
      top: 0;
    }

    /* Flow item: 3-column grid */
    .flow-item {
      display: grid;
      grid-template-columns: 8.5rem 3.5rem 1fr;
      align-items: stretch;
      padding: 0;
      position: relative;
      counter-increment: flow-counter;
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity .8s var(--ease-out),
        transform .8s var(--ease-spring);
    }
    .flow-list .flow-item.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .flow-list .flow-item:nth-child(2).is-visible { transition-delay: 0s; }
    .flow-list .flow-item:nth-child(3).is-visible { transition-delay: .12s; }
    .flow-list .flow-item:nth-child(4).is-visible { transition-delay: .24s; }
    .flow-list .flow-item:nth-child(5).is-visible { transition-delay: .36s; }
    .flow-list .flow-item:nth-child(7).is-visible { transition-delay: .12s; }
    .flow-list .flow-item:nth-child(9).is-visible { transition-delay: .12s; }

    /* Time column (left) */
    .flow-item__time {
      padding: 1.5rem 1rem 1.5rem 0;
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      align-items: flex-end;
      justify-content: center;
    }
    .flow-item__day {
      font-family: var(--f-en);
      font-weight: 800;
      font-size: 1.0625rem;
      letter-spacing: 0.02em;
      color: var(--c-brand-deep);
      line-height: 1.1;
    }
    .flow-item__day-sub {
      font-family: var(--f-ja);
      font-weight: 700;
      font-size: 0.6875rem;
      letter-spacing: 0.16em;
      color: var(--c-text-mute);
    }

    /* Rail column (vertical line + dot) */
    .flow-item__rail {
      position: relative;
      display: flex;
      justify-content: center;
      min-height: 100%;
    }
    .flow-item__rail::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: linear-gradient(180deg, rgba(9,111,200,.35), rgba(63,158,227,.55));
      z-index: 0;
    }
    /* No line at the top of first item (handled by sibling rule) */
    .flow-list > :first-child.flow-item .flow-item__rail::before,
    .flow-phase:first-child + .flow-item .flow-item__rail::before {
      top: 1.5rem;
    }
    /* No line below the last item */
    .flow-list > .flow-item:last-child .flow-item__rail::before {
      bottom: calc(100% - 2.5rem);
    }
    .flow-item__dot {
      width: 18px;
      height: 18px;
      background: #FFFFFF;
      border: 3px solid var(--c-brand);
      border-radius: 50%;
      position: absolute;
      top: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      box-shadow: 0 0 0 6px rgba(9,111,200,.08), 0 4px 14px -2px rgba(9,111,200,.3);
      transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-spring);
    }
    .flow-item__dot--accent {
      background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand));
      border-color: var(--c-brand-deep);
      width: 22px;
      height: 22px;
      box-shadow: 0 0 0 8px rgba(9,111,200,.12), 0 6px 18px -2px rgba(9,111,200,.45);
    }
    .flow-item__dot--final {
      background: linear-gradient(135deg, #28C840, #128A5C);
      border-color: #128A5C;
      width: 22px;
      height: 22px;
      box-shadow: 0 0 0 8px rgba(40,200,64,.14), 0 6px 18px -2px rgba(40,200,64,.45);
    }

    /* Content card (right) */
    .flow-item__content {
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 1rem;
      padding: 1.375rem 1.5rem 1.375rem;
      box-shadow: var(--shadow-rest);
      margin: 0.75rem 0 1rem 1.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
    }
    /* Speech bubble triangle pointing to the rail */
    .flow-item__content::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 1.5rem;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 10px solid var(--c-line);
    }
    .flow-item__content::after {
      content: '';
      position: absolute;
      left: -9px;
      top: 1.5rem;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 10px solid var(--c-surface);
    }
    .flow-item__content:hover {
      transform: translateX(4px);
      border-color: var(--c-brand);
      box-shadow: 0 18px 36px -18px rgba(9,111,200,.25);
    }
    .flow-item__content--accent {
      border-color: var(--c-brand);
      background: linear-gradient(135deg, rgba(9,111,200,.04), rgba(63,158,227,.06));
      box-shadow: 0 12px 28px -16px rgba(9,111,200,.28);
    }
    .flow-item__content--accent::before { border-right-color: var(--c-brand); }
    .flow-item__content--accent::after { border-right-color: #FAFCFF; }
    .flow-item__content--final {
      border-color: #28C840;
      background: linear-gradient(135deg, rgba(40,200,64,.04), rgba(40,200,64,.08));
      box-shadow: 0 12px 28px -16px rgba(40,200,64,.28);
    }
    .flow-item__content--final::before { border-right-color: #28C840; }
    .flow-item__content--final::after { border-right-color: #FAFEF9; }

    .flow-item__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .flow-item__n {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 800;
      letter-spacing: 0.32em;
      color: var(--c-brand);
      text-transform: uppercase;
    }
    .flow-item__t {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1.1875rem;
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: var(--c-text);
      margin: 0;
    }
    .flow-item__d {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: var(--c-text-sub);
      margin: 0;
    }
    .flow-item__d strong {
      color: var(--c-brand-deep);
      font-weight: 800;
    }
    .flow-item__dur {
      font-family: var(--f-en);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--c-brand);
      padding: 0.3rem 0.625rem;
      background: rgba(9,111,200,.08);
      border-radius: 999px;
      white-space: nowrap;
    }
    .flow-item__content--final .flow-item__dur {
      color: #128A5C;
      background: rgba(40,200,64,.12);
    }

    /* Mobile: stack the time/rail/content vertically */
    @media (max-width: 720px) {
      .flow-item,
      .flow-phase {
        grid-template-columns: 2.5rem 1fr;
      }
      .flow-item__time {
        grid-column: 2;
        text-align: left;
        align-items: flex-start;
        padding: 1rem 0 0 0;
      }
      .flow-item__rail {
        grid-column: 1;
        grid-row: 1 / span 2;
      }
      .flow-item__content {
        grid-column: 2;
        margin: 0.5rem 0 1.25rem 0.5rem;
      }
      .flow-item__content::before,
      .flow-item__content::after { display: none; }
      .flow-phase__label,
      .flow-phase__span { margin-left: 0.75rem; }
    }

    /* ============================================
       FAQ
       ============================================ */
    .faq-list { max-width: 56rem; margin: 0 auto; background: var(--c-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-rest); overflow: hidden; }
    .faq-item { border-bottom: 1px solid var(--c-line); }
    .faq-item:last-child { border-bottom: none; }
    .faq-q { padding: 1.5rem 2rem; cursor: auto; list-style: none; display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 1.25rem; align-items: center; transition: background-color .25s; width: 100%; text-align: left; background: transparent; border: none; }
    .faq-q::-webkit-details-marker { display: none; }
    .faq-q:hover { background: var(--c-bg-warm); }
    .faq-marker { font-family: var(--f-en); font-weight: 800; font-size: 0.875rem; color: var(--c-brand); }
    .faq-marker-a { color: var(--c-text-mute); }
    .faq-qt { font-family: var(--f-ja-bold); font-weight: 700; font-size: 0.9375rem; line-height: 1.65; letter-spacing: 0.04em; color: var(--c-text); }
    .faq-icn { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; color: var(--c-text-mute); font-size: 0.875rem; transition: transform .3s, color .3s; }
    .faq-item[open] .faq-icn { transform: rotate(45deg); color: var(--c-brand); }
    .faq-a { padding: 0 2rem 1.75rem; display: grid; grid-template-columns: 1.5rem 1fr; gap: 1.25rem; }
    .faq-a-text { font-family: var(--f-ja); font-weight: 500; font-size: 0.8125rem; line-height: 1.95; letter-spacing: 0.04em; color: var(--c-text-sub); }

    /* ============================================
       Final Triple CTA — 3段
       ============================================ */
    .triple-cta {
      max-width: var(--container);
      margin: 0 auto;
      padding: 6rem 2.5rem;
    }
    .triple-cta__inner {
      background: linear-gradient(135deg, var(--c-dark-1) 0%, var(--c-dark-2) 50%, var(--c-dark-3) 100%);
      border-radius: var(--radius-xl);
      padding: 5rem 4rem;
      text-align: center;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(9,111,200,.20);
    }
    .triple-cta__inner::before {
      content: '';
      position: absolute;
      top: 20%; left: 50%;
      transform: translateX(-50%);
      width: 70%; height: 60%;
      background: radial-gradient(circle, rgba(118,183,237,.40), transparent 60%);
      filter: blur(60px);
      animation: ctaGlow 8s var(--ease-soft) infinite;
    }
    .triple-cta__inner > * { position: relative; z-index: 1; }
    .triple-cta__eyebrow {
      font-family: var(--f-en);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.32em;
      color: rgba(255,255,255,.78);
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .triple-cta__title { font-family: var(--f-ja-bold); font-weight: 900; font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.4; letter-spacing: 0.04em; color: #fff; margin-bottom: 1.25rem; }
    .triple-cta__title em { font-style: normal; color: #FFFFFF; font-weight: 900; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 0.18em; }
    .triple-cta__lead { font-family: var(--f-ja-bold); font-weight: 700; font-size: 1rem; line-height: 2; letter-spacing: 0.06em; color: rgba(255,255,255,.85); max-width: 36em; margin: 0 auto 3rem; }

    .triple-cta__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      max-width: 60rem;
      margin: 0 auto;
    }
    .triple-cta__card {
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius-lg);
      padding: 2rem 1.75rem 1.75rem;
      text-align: center;
      display: grid;
      gap: 0.875rem;
      transition: transform .35s var(--ease-spring), background-color .35s, border-color .35s;
    }
    .triple-cta__card:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
    .triple-cta__card-icon {
      width: 2.5rem; height: 2.5rem;
      border-radius: 0.625rem;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.30);
      display: grid;
      place-items: center;
      color: #FFFFFF;
      margin: 0 auto;
    }
    .triple-cta__card-icon svg { width: 1.25rem; height: 1.25rem; }
    .triple-cta__card-title {
      font-family: var(--f-ja-bold);
      font-weight: 900;
      font-size: 1rem;
      line-height: 1.55;
      letter-spacing: 0.06em;
      color: #fff;
    }
    .triple-cta__card-desc {
      font-family: var(--f-ja);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.9;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,.72);
    }
    .triple-cta__card-btn {
      margin-top: 0.5rem;
      padding: 0.875rem 1.25rem;
      background: #fff;
      color: var(--c-text);
      font-family: var(--f-ja-bold);
      font-weight: 700;
      font-size: 0.8125rem;
      letter-spacing: 0.1em;
      border-radius: var(--radius-pill);
      transition: transform .25s var(--ease-spring), background-color .25s, color .25s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4375rem;
    }
    .triple-cta__card-btn::after { content: '→'; transition: transform .35s var(--ease-spring); }
    .triple-cta__card:hover .triple-cta__card-btn { background: #FFFFFF; color: var(--c-brand-deep); }
    .triple-cta__card:hover .triple-cta__card-btn::after { transform: translateX(4px); }
    .triple-cta__card--feature {
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.42);
      box-shadow: 0 12px 30px -12px rgba(0,0,0,.25);
    }
    .triple-cta__card--feature::before {
      content: '◉ おすすめ';
      position: absolute;
      top: -0.625rem;
      right: 1rem;
      padding: 0.3125rem 0.8125rem;
      background: #FFFFFF;
      color: var(--c-brand-deep);
      font-family: var(--f-ja-bold);
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      border-radius: 999px;
      box-shadow: 0 6px 14px -4px rgba(0,0,0,.25);
    }
    .triple-cta__card { position: relative; }
    .triple-cta__card--feature .triple-cta__card-icon { background: #FFFFFF; color: var(--c-brand-deep); border-color: #FFFFFF; }
    .triple-cta__fine { font-family: var(--f-en); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: 2.25rem; }

    /* ============================================
       Responsive
       ============================================ */
    @media (max-width: 1280px) {
      .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
      .hero__device { grid-column: 1 / -1; max-width: 36rem; margin: 0 auto; width: 100%; }
      .hero__copy { max-width: 100%; padding-top: 0; }
    }
    @media (max-width: 1024px) {
      .hero, .section, .trust, .triple-cta { padding-left: 1.5rem; padding-right: 1.5rem; }
      .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero__device { grid-column: auto; }
      .hero__copy { max-width: 100%; }
      .trust__row { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 2rem; }
      .persona__grid { grid-template-columns: 1fr; }
      .persona-card__vis { height: 11rem; }
      .persona-card__body { padding: 1.5rem 1.75rem 1.75rem; }
      .agents__grid { grid-template-columns: repeat(2, 1fr); }
      .overview-pillars { grid-template-columns: 1fr; gap: 1rem; }
      .mid-cta { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 2rem; }
      .mid-cta__action { justify-items: start; }
      .coverage__head { grid-template-columns: 1fr; padding: 2rem 1.75rem 1.5rem; gap: 1.25rem; }
      .coverage__claim { font-size: 1.25rem; }
      .coverage__matrix { grid-template-columns: 1fr; }
      .coverage__col { border-right: 0; border-bottom: 1px solid var(--c-line); padding: 1.5rem 1.75rem; }
      .coverage__col:last-child { border-bottom: 0; }
      .coverage__foot { grid-template-columns: 1fr; padding: 1.5rem 1.75rem; }
      .assets { grid-template-columns: repeat(2, 1fr); }
      .asset:nth-child(2)::after { display: none; }
      .compare__head, .compare__row { grid-template-columns: 0.75fr 1fr 1fr 1.1fr; font-size: 0.75rem; gap: 0.5rem; }
      .compare__head-cell, .compare__row-cell { padding: 1rem 1.125rem; }
      .compare__name { font-size: 0.9375rem; }
      .compare__head-cell--ours .compare__name { font-size: 1.0625rem; }
      .compare-insight { grid-template-columns: 1fr; }
      .pricing-wrap { grid-template-columns: 1fr; }
      .growth { grid-template-columns: 1fr; gap: 2rem; }
      .growth-tiles { grid-template-columns: repeat(2, 1fr); }
      .pdca__wheel { max-width: 32rem; }
      .pdca__hub { width: 52%; padding: 1.25rem 1.375rem 1.5rem; }
      .pdca__hub-t { font-size: 2rem; }
      .pdca__card { width: 24%; padding: 0.625rem 0.75rem; }
      .service-feature { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.75rem; }
      .triple-cta__inner { padding: 3.5rem 2rem; }
      .triple-cta__grid { grid-template-columns: 1fr; gap: 1rem; }
    }

    /* ============================================
       Custom cursor — 本体トップと同じ Goodpatch 風 minimal
       ============================================ */
    .cursor {
      position: fixed;
      top: 0; left: 0;
      width: 8px; height: 8px;
      background: var(--c-text, #111);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .3s ease-out, height .3s ease-out, background-color .3s, opacity .3s;
      mix-blend-mode: difference;
    }
    .cursor.is-hover {
      width: 56px; height: 56px;
      background: rgba(255,255,255,.6);
      mix-blend-mode: difference;
    }
    .cursor.is-link {
      width: 36px; height: 36px;
      background: var(--c-accent, #FF6B5B);
      mix-blend-mode: normal;
    }

    @media (max-width: 768px) {
      body { cursor: auto; } .cursor { display: none; }
      .header { padding: 0.625rem 0.75rem; }
      .hero { padding: 6rem 1.5rem 4rem; }
      .hero__title { font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.3; }
      .compare__head, .compare__row { grid-template-columns: 1fr; }
      .compare__head-cell, .compare__row-cell { padding: 1rem 1.25rem; }
      .compare__head-cell--ours { margin: 0; }
      .compare-insight { grid-template-columns: 1fr; gap: 0.75rem; }
      .rli { grid-template-columns: 1fr; gap: 1rem; }
      .rli__icon { justify-self: start; }
      /* .flow-item mobile handled by dedicated 720px breakpoint */
      .agents__grid { grid-template-columns: 1fr; }
      .growth-tiles { grid-template-columns: 1fr; }
      /* スマホでは円形をやめて縦積みに */
      .pdca__wheel { aspect-ratio: auto; max-width: 100%; }
      .pdca__svg, .pdca__arrow, .pdca__hub-cycle { display: none; }
      .pdca__hub {
        position: relative;
        top: auto; left: auto;
        transform: none;
        width: 100%;
        aspect-ratio: auto;
        padding: 1.5rem 1.75rem;
        border-radius: 1rem;
        margin-bottom: 1rem;
      }
      .pdca__card {
        position: relative;
        width: 100%;
        translate: none !important;
        top: auto; left: auto; right: auto; bottom: auto;
        margin-bottom: 0.75rem;
      }
      .pdca__card.is-active { scale: 1; }
      .ticket { grid-template-columns: 1fr; }
      .ticket__stub { writing-mode: horizontal-tb; transform: none; border-right: none; border-bottom: 1px dashed rgba(255,255,255,.18); padding: 1.25rem 1.75rem; flex-direction: row; }
    }