.page-dots{--dots-blue:#385ce8;--dots-purple:#7151d9;--dots-pink:#ce5d88;--dots-ink:#20252f}
.page-dots > header{background:#fff}
.page-dots > header nav a[aria-current="page"]::after{background:var(--dots-blue)}
.page-dots .label,.page-dots .ochm-feat__no,.page-dots .oc-usecase__no{color:var(--dots-blue)}
.page-dots .section h2 em,.page-dots .final h2 em{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;color:var(--dots-ink);-webkit-text-fill-color:var(--dots-ink);
}
.page-dots .ibtn-primary{background:var(--dots-blue);border-color:var(--dots-blue)}
.page-dots .ibtn-primary .arw{color:var(--dots-blue)}
.page-dots .ibtn-ghost .arw{color:var(--dots-blue);background:rgba(56,92,232,.1)}
.dots-hero{
  position:relative;overflow:hidden;padding-top:var(--header-h);background:#fff;
}
.dots-hero__stage{position:relative;width:100%;aspect-ratio:1942/809;overflow:hidden}
.dots-hero__stage > img{display:block;width:100%;height:100%;object-fit:cover}
.dots-hero__baked-actions{position:absolute;z-index:3;inset:0;pointer-events:none}
.dots-hero__baked-actions::before{content:"";position:absolute;left:25.5%;top:74.8%;width:17.7%;height:11.6%;border-radius:999px;background:#fff;pointer-events:none}
.dots-hero__baked-actions a{position:absolute;z-index:1;top:75.6%;height:10%;border-radius:999px;pointer-events:auto;--hero-cta:#385ce8}
.dots-hero__baked-actions a:first-child{left:5.1%;width:20.2%}
.dots-hero__baked-actions a:last-child{left:26.05%;top:75.9%;width:16.55%;height:9.2%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #111;color:#111;font-size:clamp(12px,1.24vw,24px);font-weight:700;line-height:1}
.dots-hero__baked-actions a:last-child .ibtn__label{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:transform .3s ease,opacity .3s ease}
.dots-hero__baked-actions a:last-child .dots-hero__price-arrow{position:absolute;right:10%;font-size:1.2em;line-height:1}
.dots-hero__baked-actions a:last-child:is(:hover,:focus-visible) .ibtn__label{opacity:0;transform:translateX(3rem)}
.dots-hero__baked-actions a:focus-visible{outline:3px solid #126bf3;outline-offset:3px}
.dots-hero::before,.dots-hero::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;pointer-events:none}
.dots-hero::before{left:-96px;top:84px;background:linear-gradient(140deg,#6e8ff6,#af9ef3)}
.dots-hero::after{right:-115px;bottom:-72px;background:linear-gradient(140deg,#70d0d1,#7c94ef)}
.dots-hero__inner{position:relative;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:clamp(640px,calc(100vw * 731 / 1558),1000px);padding-top:24px;padding-bottom:24px;gap:2vw}
.dots-hero__copy{position:relative;z-index:3;max-width:700px}
.dots-hero__copy > .label{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:clamp(13px,1.15vw,17px);font-weight:800;letter-spacing:.2em}
.dots-new{padding:5px 12px;border:1.5px solid currentColor;border-radius:999px;font-size:11px;letter-spacing:.1em}
.dots-hero h1{margin-top:clamp(20px,2.4vw,34px);color:var(--dots-ink);font-size:clamp(46px,4.4vw,82px);line-height:1.22;letter-spacing:-.065em;font-weight:800;text-wrap:balance}
.dots-hero h1 em{font-style:normal;color:var(--dots-blue);white-space:nowrap}
.dots-hero .lead{margin-top:20px;max-width:38em;color:#4d596e;font-size:clamp(16px,1.16vw,19px);line-height:1.85;font-weight:550}
.dots-hero__support{margin-top:16px;max-width:38em;color:#3c4659;font-size:clamp(15px,1.08vw,18px);line-height:1.8;font-weight:700}
.dots-hero__facts{margin-top:20px;gap:9px}
.dots-hero__facts li{font-size:13px;white-space:normal}
.dots-hero__facts li::before{background:var(--dots-blue)}
.dots-hero__art{position:relative;z-index:1;min-width:0;aspect-ratio:3/2}
.dots-hero__art img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.dots-hero__halo{position:absolute;inset:7% 12%;border:1px dashed rgba(107,111,230,.3);border-radius:50%;transform:rotate(-15deg);animation:dotsHaloTurn 42s linear infinite}
.dots-space-particles{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes dotsHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes dotsHaloTurn{to{transform:rotate(345deg)}}
.dots-features .ochm-feat__art{isolation:isolate}
.dots-feat-art{display:grid;place-items:center;min-height:224px;padding:18px;background:linear-gradient(180deg,var(--tone-1),#fff)}
.dots-feat-art::before,.dots-feat-art::after{display:none}
.dots-feat-art>img{width:min(100%,370px);height:184px;object-fit:contain;filter:none;transition:transform .25s ease}
.ochm-feat:hover .dots-feat-art>img{transform:translateY(-3px)}
.dots-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:370px}
.dots-app-grid>div{display:grid;justify-items:center;align-content:center;gap:7px;min-width:0;min-height:94px;padding:8px 4px;border:1px solid #e4e9f1;border-radius:14px;background:#fff}
.dots-app-grid img{display:block;width:42px;height:42px;object-fit:contain;filter:none}
.dots-app-grid span{color:#485568;font-size:10px;font-weight:700;line-height:1.25;letter-spacing:0;white-space:nowrap}
.dots-feat-art small{display:block;margin-top:8px;color:#7a8493;font-size:11px;line-height:1.55}
.dots-panel{background:linear-gradient(135deg,#314cae,#624db6 58%,#7058c2);color:#fff}
.dots-panel .ochm-orbit__img{width:min(100%,450px);margin:auto}
.dots-panel .ochm-orbit::before{border-color:rgba(255,255,255,.32)}
.dots-panel .ochm-orbit__pin{color:#252b55}
.dots-panel .ochm-fig{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
.dots-support{background:#f7f9ff}
.dots-support .sec-head{text-align:center}
.dots-support__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.dots-support__grid article{min-width:0;padding:clamp(26px,2.6vw,38px);border:1px solid rgba(81,105,177,.14);border-radius:28px;background:#fff;box-shadow:0 14px 36px rgba(80,99,157,.07);transition:transform .3s ease,box-shadow .3s ease}
.dots-support__grid article:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(80,99,157,.13)}
.dots-support__grid span{font-size:12px;letter-spacing:.08em;font-weight:800;color:var(--dots-blue)}
.dots-support__grid h3{margin-top:20px;color:var(--dots-ink);font-size:clamp(19px,1.55vw,24px)}
.dots-support__grid p{margin-top:12px;color:#586276;line-height:1.85;font-size:15px}
.dots-source-note{padding-block:28px 42px}
.dots-source-note p{max-width:1000px;margin-inline:auto;color:#596273;line-height:1.85;font-size:13px}
.dots-source-note a{color:var(--dots-blue);text-underline-offset:3px}
.dots-fit .sec-head{text-align:center}
.dots-fit .sec-lead{max-width:760px;margin-inline:auto}
.dots-fit .dept h3 i,.dots-fit .dept li::before{background:var(--dots-blue)}
.dots-compare .sec-head{text-align:center}
.dots-compare .sec-lead{max-width:760px;margin-inline:auto}
.dots-compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dots-compare-grid .gb-compare-card{min-height:330px;padding:clamp(20px,2vw,30px);border-radius:24px}
.dots-compare-grid .gb-compare-card h3{font-size:clamp(19px,1.65vw,24px);overflow-wrap:anywhere}
.dots-compare-grid .gb-compare-card > b{font-size:14px;line-height:1.55}
.dots-compare-grid .gb-compare-card p{font-size:13px;line-height:1.75}
.dots-compare-card--dots{--product-accent:linear-gradient(90deg,#385ce8,#7151d9)}
.dots-compare-card--dots a{color:var(--dots-blue)}
.dots-final{background:linear-gradient(160deg,#eef2ff,#f7f0fb)}
.dots-final .cta{justify-content:center}
@media(max-width:1000px){
  .dots-hero{padding-top:0;background:radial-gradient(circle at 78% 48%,rgba(153,189,255,.3),transparent 36%),radial-gradient(circle at 60% 12%,rgba(221,206,255,.34),transparent 28%),#fff}
  .dots-hero__stage{display:none}
  .dots-hero__inner{display:grid;min-height:0;grid-template-columns:1fr;padding-top:136px;padding-bottom:84px;gap:8px}
  .dots-hero__copy{min-width:0;max-width:700px}
  .dots-hero h1 em{white-space:normal}
  .dots-hero .lead,.dots-hero__support{max-width:100%;overflow-wrap:anywhere}
  .dots-hero__art{width:min(100%,610px);aspect-ratio:1.3;margin:0 auto}
  .dots-support__grid{grid-template-columns:1fr;gap:16px}
  .dots-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .dots-hero__inner{padding-top:116px;padding-bottom:60px}
  .dots-hero h1{font-size:clamp(38px,10vw,58px);line-height:1.24}
  .dots-hero .lead{font-size:15px;line-height:1.8}
  .dots-hero__support{font-size:14px}
  .dots-hero__art{width:min(100%,410px);margin-top:24px}
  .dots-hero__facts li{font-size:12px}
  .dots-hero .cta .ibtn{width:100%;justify-content:center}
  .dots-hero::before{width:95px;height:95px;left:-60px;top:-34px}
  .dots-hero::after{width:110px;height:110px;right:-70px;bottom:-35px}
  .dots-support__grid{margin-top:32px}
  .dots-compare-grid{grid-template-columns:1fr}
  .dots-compare-grid .gb-compare-card{min-height:0}
  .dots-feat-art{min-height:208px;padding:14px}
  .dots-feat-art>img{height:176px}
  .dots-app-grid{gap:6px}
  .dots-app-grid>div{min-height:88px;padding:7px 2px}
  .dots-app-grid img{width:38px;height:38px}
  .dots-app-grid span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .dots-hero__art img,.dots-hero__halo{animation:none}
  .dots-support__grid article,.dots-feat-art>img{transition:none}
}

/* ============================================================
   ヒーローのモーション
   OpenClaw / Hermes と同じ「完成画像の上に、動かす部分だけを重ねて浮遊させる」方式。
   dots は切り出し素材がないため、同じ画像をマスクで切り抜いたレイヤーを重ねている。
     .dots-hero__layer--scene : 右側のイラスト一式（カード・キャラ・小物）がゆっくり上下する
     .dots-hero__layer--orb   : 飾り玉を1つずつ、位相をずらして浮かせる
   マスク画像は _build/dots_hero_mask.py で images/dots-hero-supplied.webp から生成。
   読み込み時の表示は Grok Bot と同じ 1回だけのフェードイン。スクロール連動は持たせない。
============================================================ */
.dots-hero__stage > img{animation:dotsHeroReveal .82s var(--ease) both}
.dots-hero__layer{
  display:none;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(../images/dots-hero-supplied.webp) center/100% 100% no-repeat;
  will-change:transform;
}
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .dots-hero__layer{display:block}
}
.dots-hero__layer--scene{
  -webkit-mask:url(../images/dots-hero-scene-mask.png?v=20261003b) center/100% 100% no-repeat;
  mask:url(../images/dots-hero-scene-mask.png?v=20261003b) center/100% 100% no-repeat;
  animation:dotsSceneFloat 5.4s ease-in-out infinite,dotsHeroReveal .82s var(--ease) both;
}
/* 飾り玉: --x/--y は中心位置(%)、--r は半径(vw)。1942px幅の画像で 1px = .0515vw。 */
.dots-hero__layer--orb{
  --x:50%;--y:50%;--r:1.5vw;
  -webkit-mask:radial-gradient(circle at var(--x) var(--y),#000 calc(var(--r) - .26vw),transparent var(--r));
  mask:radial-gradient(circle at var(--x) var(--y),#000 calc(var(--r) - .26vw),transparent var(--r));
  animation:dotsOrbFloat var(--dur,4.6s) ease-in-out var(--delay,0s) infinite,dotsHeroReveal .82s var(--ease) both;
}
/* 背景のタスクカード: 1枚ずつ別の周期・位相でゆっくり上下する。マスクは _build/dots_hero_mask.py が生成。 */
.dots-hero__layer--card{
  --dur:6.4s;--delay:0s;
  animation:dotsCardFloat var(--dur) ease-in-out var(--delay) infinite,dotsHeroReveal .82s var(--ease) both;
}
.dots-hero__layer--card-1{-webkit-mask:url(../images/dots-hero-card-1-mask.png?v=20261003b) center/100% 100% no-repeat;mask:url(../images/dots-hero-card-1-mask.png?v=20261003b) center/100% 100% no-repeat}
.dots-hero__layer--card-2{-webkit-mask:url(../images/dots-hero-card-2-mask.png?v=20261003b) center/100% 100% no-repeat;mask:url(../images/dots-hero-card-2-mask.png?v=20261003b) center/100% 100% no-repeat}
.dots-hero__layer--card-3{-webkit-mask:url(../images/dots-hero-card-3-mask.png?v=20261003b) center/100% 100% no-repeat;mask:url(../images/dots-hero-card-3-mask.png?v=20261003b) center/100% 100% no-repeat}
@keyframes dotsCardFloat{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@keyframes dotsHeroReveal{from{opacity:0}to{opacity:1}}
@keyframes dotsSceneFloat{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}
@keyframes dotsOrbFloat{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@media(max-width:1000px){
  /* モバイルはステージ非表示。代わりにイラスト全体をゆっくり浮かせる。 */
  .dots-hero__art img{animation:dotsHeroFloat 5.4s ease-in-out infinite;will-change:transform}
}
@media(prefers-reduced-motion:reduce){
  .dots-hero__layer{display:none}
  .dots-hero__stage > img{animation:none}
}