/*
 * AIILAMATE LP — premium rebuild.
 * Brand = soft blue→violet→pink gradient (from the AIILAMATE wordmark). Light, airy, generous
 * whitespace; the gradient is used SPARINGLY (accents/CTA only) so it reads premium, not noisy.
 * Real product is shown in dark mockups. Robust by default: content visible with no JS (JS only
 * adds the drawer + optional reveal), overflow-x clipped (no mobile horizontal scroll), reduced-motion safe.
 */
:root {
  --blue: #4aa6ef; --violet: #8a82f3; --iris: #7b6ef0; --pink: #ee84c2; --mag: #c98fe0;
  --grad: linear-gradient(108deg, #4aa6ef 0%, #8a82f3 44%, #c98fe0 72%, #ee84c2 100%);
  --grad-soft: linear-gradient(108deg, #7cc0f5, #a9a3f7 50%, #f0a6d2);

  --text: #15162c; --text-2: #3e4060; --muted: #6c6f8d; --muted-2: #8c8fa8;
  --bg: #ffffff; --tint: #f5f4fd; --tint-2: #eef3fb; --tint-3: #f3effb;
  --hair: rgba(22, 20, 55, 0.09); --hair-2: rgba(22, 20, 55, 0.14);
  --card: #ffffff;
  --ink: #14151f; --ink-2: #1a1c28; --ink-3: #20222f; --ink-text: #e8eaf6; --ink-mut: #99a0bd;

  --sans: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --maxw: 1140px; --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: #f1f3fb; }
body {
  margin: 0; font-family: var(--sans); color: var(--text);
  line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-feature-settings: "palt" 1; position: relative;
  /* THE JOURNEY (base) — pale cool→warm, travels with scroll as you descend. */
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 6%, #f5f7ff 15%, #ece9ff 31%, #e7e1fc 45%, #e6ecf7 58%,
    #f3e8f8 73%, #fde7ec 88%, #fff0e8 100%);
}
/* a soft, drifting PALE mesh fixed to the viewport → every screen reads as a living
   multi-colour gradient (never a flat fill). With the travelling base it keeps shifting
   as you scroll. Kept very light so it never becomes a heavy wash (the prior mistake). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 40% at 84% 6%, rgba(118, 150, 255, .14), transparent 70%),
    radial-gradient(48% 36% at 10% 28%, rgba(86, 176, 240, .10), transparent 72%),
    radial-gradient(54% 42% at 82% 62%, rgba(190, 158, 250, .08), transparent 72%),
    radial-gradient(52% 40% at 14% 86%, rgba(250, 148, 184, .12), transparent 72%);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift { 0% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); } 100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-on { display: inline; } .sp-on { display: none; }
b { font-weight: 700; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-cta { background: var(--grad); background-size: 160% 160%; color: #fff; padding: .62rem 1.3rem; font-size: .9rem; box-shadow: 0 12px 30px -12px rgba(123, 110, 240, .6); animation: gshift 8s ease-in-out infinite; }
@keyframes gshift { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.btn-ghost { background: #fff; border-color: var(--hair-2); color: var(--text); padding: .62rem 1.25rem; font-size: .9rem; }
.btn-lg { padding: .95rem 1.9rem; font-size: 1rem; }
.ck { font-style: normal; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--hair); }
.nav-in { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.brand-logo { height: 30px; width: auto; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { color: var(--text-2); font-size: .9rem; font-weight: 600; }
.nav-links a:hover { color: var(--iris); }
.nav-cta { margin-left: .2rem; }
.nav-burger { display: none; margin-left: auto; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
.nav-burger.x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.x span:nth-child(2) { opacity: 0; }
.nav-burger.x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 86px) 0 clamp(36px, 5vw, 64px); overflow: visible; }
.hero-aura { position: absolute; inset: -10% -5% auto -5%; height: 760px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 78% 16%, rgba(138, 130, 243, .26), transparent 70%),
    radial-gradient(40% 36% at 18% 30%, rgba(74, 166, 239, .20), transparent 70%),
    radial-gradient(46% 40% at 60% 70%, rgba(238, 132, 194, .16), transparent 72%);
  filter: blur(8px); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--text-2); background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: .4rem .9rem; box-shadow: 0 6px 18px -12px rgba(20, 16, 50, .35); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.hero h1 { font-size: clamp(1.65rem, 2.8vw, 2.45rem); line-height: 1.32; letter-spacing: -.02em; font-weight: 900; margin: 1.1rem 0 0; word-break: keep-all; }
.hero-sub { color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.12rem); margin: 1.1rem 0 0; max-width: 30em; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.7rem; }
.hero-trust { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 600; color: var(--text-2); }

/* app mockup (light) */
.hero-app { position: relative; }
.app { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 40px 90px -40px rgba(40, 36, 90, .35), 0 12px 30px -18px rgba(40, 36, 90, .25); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: .6rem; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: #fbfbff; }
.app-dots { display: inline-flex; gap: 6px; margin-right: .2rem; } .app-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e2ee; } .app-dots i:nth-child(1) { background: #ffb9b0; } .app-dots i:nth-child(2) { background: #ffe1a3; } .app-dots i:nth-child(3) { background: #b6e6c4; }
.app-assistant { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; }
.ava { width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app-tag { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--iris); background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .22); border-radius: 999px; padding: 3px 10px; }
.app-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #fcfcff, #f7f7fd); }
.msg { display: flex; }
.msg.me { justify-content: flex-end; }
.msg.me .b { background: var(--grad); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: .9rem; font-weight: 500; max-width: 80%; box-shadow: 0 8px 20px -12px rgba(123, 110, 240, .6); }
.msg.ai .b { background: #fff; border: 1px solid var(--hair); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: .9rem; max-width: 92%; box-shadow: 0 8px 24px -16px rgba(40, 36, 90, .3); }
.msg.ai .b p { margin: 0; line-height: 1.7; }
.refs { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hair-2); }
.refs-h { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.ref { display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 600; color: var(--text-2); background: var(--tint-2); border: 1px solid var(--hair); border-radius: 9px; padding: 6px 10px; margin: 0 0 5px 0; }
.ref-ic { font-size: .8rem; flex: none; }
.ref-nm { display: flex; flex-direction: column; line-height: 1.2; }
.ref-nm small { font-size: .62rem; font-weight: 600; color: var(--muted-2); }
.ref-rel { margin-left: auto; font-size: .64rem; font-weight: 700; color: var(--iris); background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* intelligent reasoning trace (agentic, not just search) */
.ha-think { display: none; flex-direction: column; gap: 5px; margin: 0 0 6px; }
.ha-think.in { display: flex; }
.ha-step { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600; color: var(--muted); opacity: 0; transform: translateY(4px); animation: stepIn .34s ease forwards; }
.ha-step.done { color: var(--text-2); }
.ha-ic { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--iris); animation: spin .7s linear infinite; flex: none; box-sizing: border-box; }
.ha-step.done .ha-ic { border: none; background: var(--grad); animation: none; position: relative; }
.ha-step.done .ha-ic::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 900; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.app-input { display: flex; align-items: center; gap: .5rem; padding: 10px 12px; border-top: 1px solid var(--hair); background: #fff; }
.ai-chip { font-size: .68rem; font-weight: 600; color: var(--iris); background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .24); border-radius: 999px; padding: 2px 9px; }
.app-input .ph { flex: 1; min-width: 0; color: var(--muted-2); font-size: .84rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-input .send { font-size: .76rem; font-weight: 700; color: #fff; background: var(--grad); border-radius: 9px; padding: 6px 13px; }
.hero-badge { position: absolute; font-size: .74rem; font-weight: 700; color: var(--text); background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 6px 13px; box-shadow: 0 14px 30px -14px rgba(40, 36, 90, .4); }
.hero-badge.hb1 { top: 8%; right: -14px; } .hero-badge.hb2 { bottom: 12%; left: -16px; }

.logos-strip { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: clamp(34px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--hair); position: relative; z-index: 1; }
.logos-label { font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.logos { font-size: .82rem; font-weight: 600; color: var(--muted-2); letter-spacing: .02em; }

/* ---------- section shells ---------- */
.sec { padding: clamp(40px, 5vw, 78px) 0; position: relative; }
.sec-tint { background: linear-gradient(180deg, var(--tint), #fff); }
.sec-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-eyebrow.light { opacity: .95; }
.sec-title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 900; margin: .6rem 0 0; }
.sec-lead { color: var(--muted); max-width: 56ch; font-size: 1.04rem; margin: 1rem auto 0; }
.center .sec-lead { margin-inline: auto; }
.sec-title.light { color: #fff; } .sec-lead.light { color: #b9bee0; }

/* ---------- wedge ---------- */
.wedge { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 2rem; }
.wedge-col { border-radius: var(--radius); padding: 28px; border: 1px solid var(--hair); background: #fff; }
.wedge-col h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 1rem; }
.wedge-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.wedge-col li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.wedge-col.bad { background: #fbfbfd; } .wedge-col.bad h3 { color: var(--muted); } .wedge-col.bad li { color: var(--muted); }
.wedge-col.bad li::before { content: '×'; position: absolute; left: .2rem; font-weight: 800; color: #c5c7d6; }
.wedge-col.good { position: relative; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(123, 110, 240, .5); }
.wedge-col.good h3 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wedge-col.good li { color: var(--text-2); font-weight: 500; }
.wedge-col.good li::before { content: '✓'; position: absolute; left: .1rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wedge-rim { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad-soft); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.wedge-mid { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--mag); }

/* ---------- 3 ways ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2rem; }
.way { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 30px 70px -50px rgba(40, 36, 90, .35); }
.way-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 800; color: #fff; background: var(--grad); font-size: 1rem; }
.way h3 { font-size: 1.16rem; font-weight: 800; margin: 1rem 0 .5rem; }
.way p { color: var(--muted); font-size: .94rem; margin: 0; }
.way-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 1.2rem; }
.way-flow span { font-size: .74rem; font-weight: 600; color: var(--text-2); background: var(--tint-2); border: 1px solid var(--hair); border-radius: 8px; padding: 5px 10px; }
.way-flow i { color: var(--mag); font-style: normal; font-weight: 800; }

/* ---------- screens ---------- */
.screens { display: grid; gap: clamp(36px, 5vw, 72px); margin-top: 2rem; }
.screen { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.screen.rev .screen-mock { order: 2; }
.screen-copy h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; margin: 0 0 .7rem; letter-spacing: -.01em; }
.screen-copy p { color: var(--muted); font-size: 1rem; margin: 0; }
.screen-mock { position: relative; }
.app.dark { background: var(--ink); border-color: rgba(255, 255, 255, .08); box-shadow: 0 50px 100px -45px rgba(20, 16, 50, .6); }
.app.dark .app-bar { background: #0f1018; border-color: rgba(255, 255, 255, .06); color: var(--ink-text); }
.app.dark b { color: var(--ink-text); }
.app.dark .app-tag { color: #c9b8ff; background: rgba(138, 130, 243, .16); border-color: rgba(138, 130, 243, .3); }
.app.dark .app-tag.run { color: #6ee7b7; background: rgba(110, 231, 183, .12); border-color: rgba(110, 231, 183, .3); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.acard { border-radius: 14px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
.acard-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: .8rem; font-weight: 700; color: #1a1a2e; }
.acard.mint .acard-ico { background: #b7e9cd; } .acard.violet .acard-ico { background: #d8cffb; } .acard.blue .acard-ico { background: #bfe0fb; } .acard.pink .acard-ico { background: #f8c9e6; }
.acard b { display: block; font-size: .9rem; margin: 8px 0 2px; color: var(--ink-text); }
.acard span { font-size: .74rem; color: var(--ink-mut); }
.acard em { display: inline-block; margin-top: 8px; font-style: normal; font-size: .66rem; font-weight: 700; color: #6ee7b7; background: rgba(110, 231, 183, .12); border: 1px solid rgba(110, 231, 183, .26); border-radius: 999px; padding: 2px 8px; }
.drop { margin: 16px; padding: 22px; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 14px; text-align: center; font-size: .92rem; font-weight: 700; color: var(--ink-text); }
.drop-sub { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-mut); margin-top: 6px; }
.files { padding: 0 16px 16px; display: grid; gap: 8px; }
.frow { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--ink-text); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 9px 12px; }
.frow .fic { font-size: .95rem; } .frow em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.frow em.ok { color: #6ee7b7; background: rgba(110, 231, 183, .12); border: 1px solid rgba(110, 231, 183, .26); }
.frow em.run { color: #fcd34d; background: rgba(252, 211, 77, .12); border: 1px solid rgba(252, 211, 77, .26); }
.steps { padding: 16px; display: grid; gap: 10px; }
.step { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--ink-mut); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px; padding: 11px 13px; }
.step i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .76rem; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--ink-mut); }
.step.done { color: var(--ink-text); } .step.done i { background: #6ee7b7; color: #103024; }
.step.run { color: var(--ink-text); } .step.run i { background: var(--grad); color: #fff; }

/* ---------- governance (dark) ---------- */
.sec-dark { background: radial-gradient(120% 80% at 50% -10%, #232447, #14151f 60%); color: var(--ink-text); }
.gov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2rem; }
.gcard { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 22px; box-shadow: 0 16px 38px -26px rgba(40, 36, 90, .2); }
.gic { font-size: 1.4rem; }
.gcard h3 { font-size: 1.02rem; font-weight: 800; margin: .7rem 0 .4rem; color: var(--text); }
.gcard p { font-size: .9rem; color: var(--muted); margin: 0; }
.gcard b { color: var(--text-2); }

/* ---------- reasons ---------- */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2rem; }
.rcard { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 30px 70px -50px rgba(40, 36, 90, .3); }
.rno { font-family: var(--sans); font-weight: 800; font-size: 1.5rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rcard h3 { font-size: 1.12rem; font-weight: 800; margin: .5rem 0 .6rem; line-height: 1.4; }
.rcard p { color: var(--muted); font-size: .94rem; margin: 0; }

/* ---------- cases ---------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 2rem; }
.case { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 24px 26px; }
.case h3 { font-size: 1.08rem; font-weight: 800; margin: 0 0 .4rem; }
.case p { color: var(--muted); font-size: .92rem; margin: 0; }
.case-ex { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: .82rem; color: var(--text-2); background: var(--tint-3); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 11px; }
.case-ex span { font-size: .64rem; font-weight: 800; color: #fff; background: var(--grad); border-radius: 6px; padding: 2px 7px; }

/* ---------- phases ---------- */
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 2rem; }
.phase { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 20px 16px; text-align: center; }
.pno { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--grad); margin-bottom: .6rem; }
.phase b { display: block; font-size: .94rem; }
.phase p { font-size: .78rem; color: var(--muted); margin: .3rem 0 0; }

/* ---------- CTA ---------- */
.cta { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(16px, 2.2vw, 28px); background: linear-gradient(135deg, #f3effc, #eaf2fc); border: 1px solid var(--hair); border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); position: relative; overflow: hidden; }
.cta-copy { max-width: 720px; text-align: center; }
.cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 90% 10%, rgba(238, 132, 194, .18), transparent 70%), radial-gradient(50% 60% at 5% 95%, rgba(74, 166, 239, .16), transparent 70%); pointer-events: none; }
.cta-copy { position: relative; }
.cta-copy h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 900; line-height: 1.34; margin: 0; letter-spacing: -.02em; }
.cta-copy p { color: var(--text-2); margin: 1rem 0 0; }
.cta-pts { list-style: none; padding: 0; margin: 1.2rem 0 0; display: inline-grid; gap: .55rem; text-align: left; }
.cta-pts li { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .94rem; color: var(--text-2); }
.cta-form { position: relative; width: 100%; max-width: 600px; background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 24px; box-shadow: 0 30px 70px -40px rgba(40, 36, 90, .4); }
.cta-form-h { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 1rem; }

/* ---------- footer ---------- */
.footer { background: linear-gradient(180deg, #fff0e8 0%, #171826 30%, #0f1018 100%); color: #c7cbe4; padding: clamp(60px, 7vw, 88px) 0 2rem; position: relative; }
.footer-in { display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; }
.footer-logo { height: 28px; width: auto; filter: brightness(1.4); }
.footer-brand p { font-size: .82rem; color: #8e92b4; margin: .5rem 0 0; }
.footer-links { display: flex; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; }
.footer-links a { font-size: .84rem; color: #b6bada; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-bpo .bpo-logo { height: 34px; width: auto; opacity: .9; }
.footer-copy { font-size: .76rem; color: #6f7396; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---------- reveal (optional, JS-gated) ---------- */
html.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { text-align: center; } .hero-sub { margin-inline: auto; } .hero-cta, .hero-trust { justify-content: center; }
  .hero-app { max-width: 520px; margin: 0 auto; }
  .screen { grid-template-columns: 1fr; gap: 24px; } .screen.rev .screen-mock { order: 0; }
  .screen-copy { text-align: center; }
  .ways, .reasons, .gov { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; } .cta-copy { position: static; }
  .phases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pc-on { display: none; } .sp-on { display: inline; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .drawer { display: flex; flex-direction: column; gap: .2rem; padding: 0 24px; background: #fff; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
  .drawer.open { max-height: 360px; padding: 12px 24px 20px; border-bottom: 1px solid var(--hair); }
  .drawer a { padding: .7rem 0; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--hair); }
  .drawer .btn-cta { margin-top: .6rem; }
  .wedge { grid-template-columns: 1fr; } .wedge-mid { transform: rotate(90deg); padding: .3rem 0; }
  .cases { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
}
@media (max-width: 460px) {
  .phases { grid-template-columns: 1fr; }
  .logos-strip { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-cta { animation: none; }
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== office-skill dark chat + file card ===== */
.app.dark .app-body { background: #16171f; }
.app.dark .msg.ai .b { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); color: var(--ink-text); box-shadow: none; }
.app.dark .msg.ai .b p { color: #d7daea; } .app.dark .msg.ai .b b { color: #fff; }
.filecard { display: flex; align-items: center; gap: .6rem; margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(110, 231, 183, .08); border: 1px solid rgba(110, 231, 183, .22); }
.filecard .ffic { font-size: 1.3rem; }
.filecard .ffinfo { display: flex; flex-direction: column; }
.filecard .ffinfo b { font-size: .82rem; color: #fff; }
.filecard .ffinfo span { font-size: .68rem; color: var(--ink-mut); }
.filecard .dl { margin-left: auto; font-size: .7rem; font-weight: 700; color: #103024; background: #6ee7b7; border-radius: 8px; padding: 5px 11px; }

/* ===== features grid ===== */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2rem; }
.fcell { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 18px; box-shadow: 0 18px 40px -34px rgba(40, 36, 90, .3); }
.fico { font-size: 1.5rem; }
.fcell b { display: block; font-size: .94rem; margin: .5rem 0 .15rem; }
.fcell p { font-size: .78rem; color: var(--muted); margin: 0; }

/* ===== connect / slack ===== */
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.connect-lead { color: var(--muted); font-size: 1.04rem; margin: 1rem 0 0; }
.connect-pts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.connect-pts li { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .94rem; color: var(--text-2); }
.slack { background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 40px 90px -45px rgba(40, 36, 90, .4); overflow: hidden; }
.slack-bar { display: flex; align-items: center; gap: .4rem; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-weight: 800; font-size: .9rem; background: #faf9fc; }
.slk-hash { color: var(--muted-2); font-weight: 700; }
.slack-msg { display: flex; gap: .6rem; padding: 12px 16px; }
.sava { width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; }
.sava.u1 { background: #4a6cf0; } .sava.bot { background: var(--grad); }
.sbody b { font-size: .82rem; display: inline-flex; align-items: center; gap: .4rem; }
.sbody b > span { font-size: .68rem; font-weight: 500; color: var(--muted-2); }
.botbadge { background: #e6e3f5; color: var(--iris); border-radius: 4px; padding: 0 5px; font-weight: 700; }
.sbody p { margin: .15rem 0 0; font-size: .88rem; line-height: 1.6; }
.mention { color: var(--iris); background: rgba(123, 110, 240, .12); border-radius: 5px; padding: 0 4px; font-weight: 600; }
.slack-thread { background: #fbfbfe; border-left: 3px solid var(--iris); margin: 0 0 8px 18px; }
.slack-ref { display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 600; color: var(--text-2); background: var(--tint-2); border: 1px solid var(--hair); border-radius: 8px; padding: 4px 9px; }

/* ===== CS section ===== */
.cs { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: 2rem; }
.cs-row { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cs-row.rev .cs-mock { order: 2; }
.cs-copy h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; margin: 0 0 .6rem; }
.cs-copy p { color: var(--muted); margin: 0; }
.cs-cfg { padding: 6px 16px 14px; }
.cfg { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .86rem; }
.cfg:last-child { border-bottom: 0; }
.cfg > span { color: var(--ink-mut); } .cfg b { color: #fff; font-weight: 600; }
.cfg em { font-style: normal; font-size: .68rem; font-weight: 700; color: #6ee7b7; background: rgba(110, 231, 183, .12); border: 1px solid rgba(110, 231, 183, .26); border-radius: 999px; padding: 2px 9px; }
.cs-review { padding: 16px; display: grid; gap: 8px; }
.rv { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-text); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 9px 12px; }
.rv .fic { font-size: .95rem; } .rv em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.rv em.ok { color: #6ee7b7; background: rgba(110, 231, 183, .12); border: 1px solid rgba(110, 231, 183, .26); }
.rv em.warn { color: #fcd34d; background: rgba(252, 211, 77, .12); border: 1px solid rgba(252, 211, 77, .26); }
.rv-cmt { font-size: .82rem; color: #c7cbe4; background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .24); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.rv-cmt b { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: var(--iris); margin-bottom: 3px; }

/* ===== HubSpot form polish (was too sparse) ===== */
.cta-form { padding: 20px 22px; }
.cta-form form, .cta-form .hs-form { display: grid; gap: 10px; }
.cta-form .hs-form-field { margin-bottom: 0 !important; }
.cta-form .hs-form-field > label { font-size: .8rem; font-weight: 600; margin: 0 0 3px; display: block; color: var(--text-2); }
.cta-form input[type=text], .cta-form input[type=email], .cta-form input[type=tel], .cta-form input[type=number], .cta-form textarea, .cta-form select { width: 100% !important; max-width: 100% !important; padding: 9px 11px !important; border: 1px solid var(--hair-2) !important; border-radius: 10px !important; font-size: .9rem !important; background: #fff !important; box-sizing: border-box; }
.cta-form textarea { min-height: 78px; }
.cta-form .hs-button { width: 100%; background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 11px 18px !important; font-weight: 700 !important; font-size: .95rem !important; cursor: pointer; margin-top: 4px; }
.cta-form .hs-error-msg, .cta-form .hs-error-msgs label { font-size: .74rem !important; color: #e0464b !important; }
.cta-form .legal-consent-container, .cta-form .hs-richtext { font-size: .72rem; color: var(--muted-2); }
.cta-form ul.inputs-list { list-style: none; margin: 0; padding: 0; }

/* ===== responsive (new sections) ===== */
@media (max-width: 980px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .connect { grid-template-columns: 1fr; gap: 30px; } .connect-copy { text-align: center; } .connect-lead { margin-inline: auto; max-width: 42ch; } .connect-pts { justify-items: center; } .connect-mock { max-width: 460px; margin: 0 auto; }
  .cs-row { grid-template-columns: 1fr; gap: 22px; } .cs-row.rev .cs-mock { order: 0; } .cs-copy { text-align: center; }
}
@media (max-width: 460px) { .fgrid { grid-template-columns: 1fr 1fr; } }

/* ===== round AIILA avatar (shown whenever AIILAMATE speaks) ===== */
.aimark { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.app-bar > .aimark, .app-assistant .aimark { width: 26px; height: 26px; }
.msg.ai { gap: 8px; align-items: flex-start; }
.am-msg { width: 26px; height: 26px; margin-top: 1px; }
.sava.bot { background: none; padding: 0; overflow: hidden; }
.sava.bot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ===== brand logos strip ===== */
.blogos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.blogo { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; color: var(--text-2); }
.blogo svg { display: block; }
.blogo em { font-style: normal; }

/* ===== cases: equal height, example pinned to bottom (was misaligned) ===== */
.case { display: flex; flex-direction: column; }
.case-tag { align-self: flex-start; font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: var(--iris); background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .22); border-radius: 999px; padding: 3px 10px; margin-bottom: .7rem; }
.case h3 { margin-top: 0; }
.case-ex { margin-top: auto; align-items: flex-start; line-height: 1.6; }
.case-ex span { flex: none; margin-top: 1px; }

/* ===== phases visual (progression axis + level bars) ===== */
.phase-axis { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2.4rem auto .4rem; max-width: 680px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.ax-line { flex: 1; height: 3px; border-radius: 999px; background: var(--grad); }
.phase { display: flex; flex-direction: column; align-items: center; }
.plevel { display: block; width: 100%; height: 5px; border-radius: 999px; background: rgba(123, 110, 240, .12); overflow: hidden; margin-top: 12px; }
.plevel i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.plabel { font-size: .62rem; font-weight: 700; color: var(--muted-2); margin-top: 6px; }
@media (max-width: 540px) { .phase-axis { font-size: .72rem; gap: 8px; } }

/* ===== HERO drama: orb + converging particles + entrance + typing ===== */
.hero-orb { position: absolute; z-index: 0; top: 8%; right: 4%; width: 560px; height: 560px; max-width: 78vw; max-height: 60vh; pointer-events: none; background: radial-gradient(circle, rgba(138, 130, 243, .3) 0%, rgba(110, 150, 255, .13) 38%, transparent 66%); filter: blur(6px); animation: orbPulse 6s ease-in-out infinite; }
@keyframes orbPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-particles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); opacity: 0; }
html.hero-anim .hero-particles i { animation: converge 5.5s ease-in-out infinite; }
@keyframes converge { 0% { opacity: 0; transform: translate(var(--px, 0), var(--py, 0)) scale(.6); } 18% { opacity: .85; } 70% { opacity: .45; } 100% { opacity: 0; transform: translate(0, 0) scale(.2); } }
.hero-particles i:nth-child(1) { top: 18%; right: 8%; --px: 60px; --py: -40px; animation-delay: 0s; }
.hero-particles i:nth-child(2) { top: 30%; right: 30%; --px: -50px; --py: -30px; animation-delay: .5s; }
.hero-particles i:nth-child(3) { top: 60%; right: 12%; --px: 50px; --py: 40px; animation-delay: 1s; }
.hero-particles i:nth-child(4) { top: 12%; right: 40%; --px: -30px; --py: -50px; animation-delay: 1.6s; }
.hero-particles i:nth-child(5) { top: 70%; right: 34%; --px: -40px; --py: 50px; animation-delay: .9s; }
.hero-particles i:nth-child(6) { top: 42%; right: 4%; --px: 70px; --py: 0; animation-delay: 2.2s; }
.hero-particles i:nth-child(7) { top: 24%; right: 20%; --px: 30px; --py: -40px; animation-delay: 1.3s; }
.hero-particles i:nth-child(8) { top: 54%; right: 24%; --px: -20px; --py: 30px; animation-delay: 2.6s; }
.hero-particles i:nth-child(9) { top: 80%; right: 18%; --px: 30px; --py: 60px; animation-delay: .3s; }
.hero-particles i:nth-child(10) { top: 8%; right: 14%; --px: 40px; --py: -50px; animation-delay: 3s; }
.hero-particles i:nth-child(11) { top: 36%; right: 38%; --px: -60px; --py: -10px; animation-delay: 1.9s; }
.hero-particles i:nth-child(12) { top: 64%; right: 6%; --px: 60px; --py: 30px; animation-delay: 2.4s; }
.hero-particles i:nth-child(13) { top: 48%; right: 16%; --px: 35px; --py: 10px; animation-delay: 3.4s; }
.hero-particles i:nth-child(14) { top: 22%; right: 32%; --px: -30px; --py: -20px; animation-delay: 3.8s; }
html.hero-anim .eyebrow, html.hero-anim .hero h1, html.hero-anim .hero-sub, html.hero-anim .hero-cta, html.hero-anim .hero-trust { opacity: 0; }
html.hero-anim .eyebrow { animation: hUp .6s ease .05s forwards; }
html.hero-anim .hero h1 { animation: hUp .7s ease .15s forwards; }
html.hero-anim .hero-sub { animation: hUp .7s ease .3s forwards; }
html.hero-anim .hero-cta { animation: hUp .7s ease .45s forwards; }
html.hero-anim .hero-trust { animation: hUp .7s ease .58s forwards; }
@keyframes hUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.hero-anim .hero-app { opacity: 0; animation: appRise 1s cubic-bezier(.2, .8, .24, 1) .45s forwards; }
@keyframes appRise { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
.app-assistant b { font-weight: 700; }
.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--iris); margin-left: 1px; vertical-align: -2px; animation: caret .9s steps(2) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.hextra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hair-2); }
.hextra.is-file { border-top: none; padding-top: 6px; }
.hextra.in { animation: hxIn .4s ease; }
@keyframes hxIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .hero-particles i { animation: none !important; opacity: 0 !important; }
  html.hero-anim .eyebrow, html.hero-anim .hero h1, html.hero-anim .hero-sub, html.hero-anim .hero-cta, html.hero-anim .hero-trust, html.hero-anim .hero-app { opacity: 1 !important; animation: none !important; }
}

/* ===== scroll-scrubbed story scenes (絵がスクロールで進行する) ===== */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
.scene { padding: clamp(36px, 5vw, 72px) 0; position: relative; --p: 1; background: linear-gradient(180deg, #fff, var(--tint) 50%, #fff); }
.scene.is-armed { --p: 0; }
.scene.play { animation: scenePlay 1.5s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes scenePlay { from { --p: 0; } to { --p: 1; } }
.scene-head { margin-bottom: clamp(18px, 3vw, 36px); }
.scene-stage { max-width: 740px; margin: 0 auto; padding: 0 20px; }
.scene-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 14px rgba(40, 36, 90, .08)); }
.scene-cap { max-width: 54ch; margin: clamp(16px, 2vw, 28px) auto 0; color: var(--muted); font-size: 1.02rem; }
.scene-cap b { color: var(--text-2); }
.sc-converge .ln { stroke-dasharray: 480; stroke-dashoffset: calc(480 - 480 * var(--p)); opacity: calc(.18 + .62 * var(--p)); }
/* files gather IN from far outside toward the orb, one after another (staggered by
   --o), then land exactly on their anchor at --p=1 so the streams stay connected.
   --lp = this file's local progress (its slice of the shared scene timeline). */
.sc-converge .doc {
  --lp: clamp(0, calc((var(--p) - var(--o, 0) * .05) / .65), 1);
  transform:
    translate(calc(var(--tx, 0) * (var(--lp) - 1) * 1px * .62), calc(var(--ty, 0) * (var(--lp) - 1) * 1px * .62))
    scale(calc(.55 + .45 * var(--lp)));
  transform-box: fill-box; transform-origin: center;
  opacity: calc(.1 + .9 * var(--lp));
}
.sc-glow { opacity: calc(var(--p) * .55); transform: scale(calc(.6 + .4 * var(--p))); transform-box: fill-box; transform-origin: center; }
.sc-radiate .ray { stroke-dasharray: 320; stroke-dashoffset: calc(320 - 320 * var(--p)); opacity: calc(.18 + .62 * var(--p)); }
.sc-radiate .rnode { transform: scale(calc(.3 + .7 * var(--p))); transform-box: fill-box; transform-origin: center; opacity: var(--p); }
.sc-glow2 { opacity: calc(var(--p) * .6); transform: scale(calc(.5 + .5 * var(--p))); transform-box: fill-box; transform-origin: center; }
.sc-orb, .sc-orb2 { transform: scale(calc(.86 + .16 * var(--p))); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 22px rgba(130, 118, 245, .6)) drop-shadow(0 10px 22px rgba(70, 60, 160, .3)); }
/* prominent, always-alive orb halo */
.orb-halo { transform-box: fill-box; transform-origin: center; animation: orbHalo 3.4s ease-in-out infinite; }
@keyframes orbHalo { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.16); opacity: .85; } }
/* particles released outward (放つ) */
.burst { transform-box: fill-box; transform-origin: center; opacity: 0; animation: burst 2.6s ease-out infinite; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 16% { opacity: .9; } 100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene { --p: 1 !important; } .orb-halo, .burst { animation: none !important; } .burst { opacity: 0; } }
@media (max-width: 600px) { .scene-stage { max-width: 100%; } }

/* bigger, clearer story art */
.scene-stage { max-width: 860px; }
.scene-svg .rnodes text, .scene-svg .lnodes text { font-size: 18px; font-weight: 700; }
.scene-cap { font-size: 1.06rem; }

/* connect scene (つながる) — orb links out to people / teams / work */
.sc-link .lnk { stroke-dasharray: 300; stroke-dashoffset: calc(300 - 300 * var(--p)); opacity: calc(.18 + .62 * var(--p)); }
.sc-link .lnode { transform: scale(calc(.4 + .6 * var(--p))); transform-box: fill-box; transform-origin: center; opacity: var(--p); }

/* ===== whole-page journey: sections are TRANSPARENT; the colour lives on <body>
   (a travelling pale base) + the soft fixed mesh above. ⇒ no section seams at all,
   and every screen reads as a living gradient that shifts as you scroll. ===== */
.sec-tint, .scene,
.j1, .j2, .j3, .j4, .j5, .j6, .j7, .j8, .j9, .j10, .j11, .j12, .j13, .j14, .j15, .j-show { background: transparent; }
.sec-guard { position: relative; }
/* "できること" only: soft white bloom (fades to transparent at edges → brighter, no seam) */
.j6 { background: radial-gradient(132% 88% at 50% 42%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ===== 事例集 carousel (real, anonymized assistant cases) ===== */
.sc-note { display: inline-block; margin-top: .5rem; font-size: .76rem; color: var(--muted-2); font-weight: 500; }
.showcase { position: relative; margin-top: clamp(28px, 4vw, 44px); }
.showcase-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 8px 4px 24px; margin: 0 -4px; scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; border-radius: 18px; }
.sc-card {
  scroll-snap-align: start; flex: 0 0 360px; max-width: 86vw;
  display: flex; flex-direction: column; gap: 11px;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  padding: 26px 22px 22px; box-shadow: 0 28px 64px -46px rgba(40, 36, 90, .45);
  position: relative; overflow: hidden;
}
.sc-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--grad); }
.sc-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-ind { font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--grad); border-radius: 999px; padding: 3px 10px; }
.sc-uc { font-size: .66rem; font-weight: 700; color: var(--iris); background: rgba(123, 110, 240, .1); border: 1px solid rgba(123, 110, 240, .22); border-radius: 999px; padding: 3px 10px; }
.sc-card .sc-title { font-size: 1.04rem; font-weight: 800; line-height: 1.5; letter-spacing: -.01em; margin: .15rem 0 .25rem; }
.sc-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.sc-row p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.7; }
.sc-lbl { font-size: .6rem; font-weight: 800; letter-spacing: .03em; border-radius: 6px; padding: 3px 7px; white-space: nowrap; margin-top: 3px; }
.lbl-issue { color: #a86a72; background: #faeef0; border: 1px solid #f1dce0; }
.lbl-sol { color: #fff; background: var(--grad); }
.sc-metric { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding-top: 13px; border-top: 1px dashed var(--hair-2); }
.sc-metric b { font-size: 1.06rem; font-weight: 900; letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-metric span { font-size: .75rem; color: var(--muted); }
.sc-voice { margin-top: auto; font-size: .82rem; color: var(--text-2); background: var(--tint-3); border: 1px solid var(--hair); border-radius: 12px; padding: 11px 13px; line-height: 1.7; }
.sc-voice span { display: block; margin-top: 5px; font-size: .7rem; font-weight: 800; color: var(--muted-2); }
.sc-docs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.sc-chip { font-size: .66rem; font-weight: 600; color: var(--text-2); background: var(--tint-2); border: 1px solid var(--hair); border-radius: 7px; padding: 3px 8px; }
/* controls */
.sc-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 2px; }
.sc-nav { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair-2); background: #fff; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -18px rgba(40, 36, 90, .55); transition: transform .15s ease, opacity .2s ease, border-color .2s ease; }
.sc-nav:hover { transform: translateY(-1px); border-color: var(--iris); }
.sc-nav:disabled { opacity: .32; cursor: default; transform: none; }
.sc-dots { display: flex; gap: 7px; align-items: center; }
.sc-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(123, 110, 240, .24); cursor: pointer; transition: width .25s ease, background .25s ease; }
.sc-dot.on { width: 24px; background: var(--grad); }
@media (max-width: 720px) { .sc-card { flex-basis: 84vw; } .sc-note { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .showcase-track { scroll-behavior: auto; } }

/* ===== mobile: tighten everything AROUND the contact form (narrow side gutters,
   slim the lavender panel + white form padding) so the form fills the width ===== */
@media (max-width: 720px) {
  .container { padding: 0 14px; }
  .cta { padding: 14px; border-radius: 18px; gap: 16px; }
  .cta-form { padding: 10px; border-radius: 14px; }
  .sec { scroll-margin-top: 74px; }
}

/* ===== hero kicker (誰向け) ===== */
.hero-kicker { font-size: .95rem; font-weight: 700; color: var(--iris); margin: 0 0 .5rem; letter-spacing: .01em; }
.hero-kicker b { font-weight: 800; }

/* ===== できること: 基礎編 / 応用編 ===== */
.basics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: clamp(22px, 3vw, 38px) auto 30px; }
.bcol { background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 24px 54px -38px rgba(40, 36, 90, .3); text-align: left; }
.bhead { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.bhead b { font-size: 1.1rem; font-weight: 800; }
.btag { font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(120deg, #4aa6ef, #8a82f3); border-radius: 999px; padding: 4px 12px; }
.btag.adv { background: linear-gradient(120deg, #8a82f3, #ee84c2); }
.blist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.blist li { display: flex; gap: .55rem; font-size: .98rem; color: var(--text-2); line-height: 1.55; }
.blist li i { font-style: normal; font-weight: 900; flex: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fgrid-lead { font-size: .9rem; color: var(--muted); margin: 4px auto 18px; }
@media (max-width: 760px) { .basics { grid-template-columns: 1fr; gap: 14px; } }

/* ===== comparison table ===== */
.cmp-wrap { max-width: 880px; margin: clamp(22px, 3vw, 40px) auto 0; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 72px -46px rgba(40, 36, 90, .4); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--hair); font-size: .95rem; vertical-align: top; }
.cmp thead th { font-size: .82rem; font-weight: 800; color: var(--text-2); background: rgba(123, 110, 240, .05); }
.cmp thead th.ai { color: var(--iris); background: linear-gradient(120deg, rgba(74, 166, 239, .14), rgba(238, 132, 194, .14)); }
.cmp td.row-h { font-weight: 700; color: var(--text); width: 26%; }
.cmp td.old { color: var(--muted); }
.cmp td.ai { color: var(--text-2); }
.cmp td.ai b { color: var(--text); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .x { color: #d08a93; font-weight: 800; } .cmp .o { color: #2fa37a; font-weight: 800; }
@media (max-width: 600px) { .cmp th, .cmp td { padding: 10px 11px; font-size: .82rem; } .cmp td.row-h { width: 30%; } }

/* chat: team-shared footer (this assistant is shared with a team) */
.hextra.is-share { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.share-ic { font-size: .98rem; }

/* ===== scroll suggestion: section progress nav ===== */
.scrollspy { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 55; }
.ss-track { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 15px 10px; border-radius: 999px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--hair); box-shadow: 0 20px 44px -28px rgba(40, 36, 90, .35); }
.ss-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: rgba(123, 110, 240, .26); border: 0; padding: 0; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.ss-dot:hover { transform: scale(1.35); background: rgba(123, 110, 240, .5); }
.ss-dot.on { background: var(--grad); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(123, 110, 240, .14); }
.ss-lbl { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; font-size: .76rem; font-weight: 700; color: #fff; background: var(--ink); padding: 5px 12px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 12px 26px -12px rgba(20, 16, 50, .55); }
.ss-dot:hover .ss-lbl, .ss-dot.on .ss-lbl { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 960px) { .scrollspy { display: none; } }
@media (prefers-reduced-motion: reduce) { .ss-dot, .ss-lbl { transition: none; } }