/* ───────────────────────────────────────────────────────────
   Compora Labs — product detail pages (shared)
   Pass 6B: Void v3 同族デザイン統一
   黒い虚空ベース (#05060c) + CSS 星屑 + void-panel 様式
   色世界: works = #e85aa8 / #8a6cf2 / #5fd3e0 (ピンク紫ホログラフィック)
   Three.js / GSAP 追加禁止。CSS + 既存 Vanilla JS のみ。
   ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:#05060c;color:#f4f2f7;font-family:var(--font-jp);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}

:root{
  /* Spectrum (トップ踏襲) */
  --s1:#7079ef;--s2:#46a6ea;--s3:#46c98c;--s4:#ecc85a;--s5:#ef9a4d;--s6:#e8694a;
  --spectrum:linear-gradient(100deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6));
  --spectrum-soft:linear-gradient(100deg,var(--s2),var(--s3),var(--s4),var(--s5));

  /* 色世界: works (ピンク紫ホログラフィック) */
  --w-a:#e85aa8;--w-b:#8a6cf2;--w-c:#5fd3e0;
  --w-grad:linear-gradient(110deg,var(--w-a),var(--w-b));
  --w-grad3:linear-gradient(110deg,var(--w-a),var(--w-b),var(--w-c));

  --bg:#05060c;--bg-2:#0a0710;
  --ink:#f4f2f7;--ink-soft:rgba(244,242,247,.82);--ink-faint:rgba(244,242,247,.58);
  --line:rgba(255,255,255,.08);
  /* 旧 glass 変数: void-panel 系に置換するが後方互換で残す */
  --glass:rgba(8,8,14,.55);--glass-2:rgba(8,8,14,.70);
  --glass-border:rgba(255,255,255,.10);
  --maxw:980px;
  --font-disp:"Quicksand",ui-rounded,system-ui,sans-serif;
  --font-tech:"Space Grotesk",ui-monospace,system-ui,sans-serif;
  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
}

/* ── 固定背景レイヤー ────────────────────────────────────────── */
/* 虚空ベース backdrop */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(130% 100% at 28% 20%, rgba(232,90,168,.14), transparent 58%),
    radial-gradient(120% 90% at 78% 70%, rgba(138,108,242,.13), transparent 58%),
    radial-gradient(110% 80% at 50% 110%, rgba(95,211,224,.10), transparent 60%),
    #05060c}

/* CSS 星屑 (軽量・固定) */
.bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle 1px at 12% 8%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(circle 1px at 34% 14%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(circle 1px at 58% 6%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(circle 1px at 81% 11%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(circle 1px at 95% 22%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(circle 1px at 7%  31%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(circle 1px at 21% 45%, rgba(255,255,255,.38) 0%, transparent 100%),
    radial-gradient(circle 1px at 45% 38%, rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(circle 1px at 67% 50%, rgba(255,255,255,.42) 0%, transparent 100%),
    radial-gradient(circle 1px at 89% 42%, rgba(255,255,255,.33) 0%, transparent 100%),
    radial-gradient(circle 1px at 15% 62%, rgba(255,255,255,.48) 0%, transparent 100%),
    radial-gradient(circle 1px at 38% 71%, rgba(255,255,255,.32) 0%, transparent 100%),
    radial-gradient(circle 1px at 62% 78%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(circle 1px at 83% 65%, rgba(255,255,255,.36) 0%, transparent 100%),
    radial-gradient(circle 1px at 4%  82%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(circle 1px at 27% 88%, rgba(255,255,255,.44) 0%, transparent 100%),
    radial-gradient(circle 1px at 52% 93%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(circle 1px at 74% 85%, rgba(255,255,255,.38) 0%, transparent 100%),
    radial-gradient(circle 1px at 91% 94%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 43% 26%, rgba(232,90,168,.50) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 71% 35%, rgba(95,211,224,.45) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 19% 76%, rgba(138,108,242,.48) 0%, transparent 100%);
  opacity:.7
}

/* 薄い DNA ストランド装飾 (works ページ共通) */
.bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    /* strand A */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='400' viewBox='0 0 900 400'%3E%3Cdefs%3E%3ClinearGradient id='sA' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23e85aa8' stop-opacity='.25'/%3E%3Cstop offset='50%25' stop-color='%238a6cf2' stop-opacity='.20'/%3E%3Cstop offset='100%25' stop-color='%235fd3e0' stop-opacity='.15'/%3E%3C/linearGradient%3E%3ClinearGradient id='sB' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%235fd3e0' stop-opacity='.20'/%3E%3Cstop offset='50%25' stop-color='%238a6cf2' stop-opacity='.18'/%3E%3Cstop offset='100%25' stop-color='%23e85aa8' stop-opacity='.12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23sA)' stroke-width='1.5' d='M-50,200 Q50,140 150,200 Q250,260 350,200 Q450,140 550,200 Q650,260 750,200 Q850,140 950,200'/%3E%3Cpath fill='none' stroke='url(%23sB)' stroke-width='1.5' d='M-50,200 Q50,260 150,200 Q250,140 350,200 Q450,260 550,200 Q650,140 750,200 Q850,260 950,200'/%3E%3Cg stroke='rgba(138,108,242,0.18)' stroke-width='1'%3E%3Cline x1='100' y1='166' x2='100' y2='234'/%3E%3Cline x1='200' y1='166' x2='200' y2='234'/%3E%3Cline x1='300' y1='166' x2='300' y2='234'/%3E%3Cline x1='400' y1='166' x2='400' y2='234'/%3E%3Cline x1='500' y1='166' x2='500' y2='234'/%3E%3Cline x1='600' y1='166' x2='600' y2='234'/%3E%3Cline x1='700' y1='166' x2='700' y2='234'/%3E%3Cline x1='800' y1='166' x2='800' y2='234'/%3E%3C/g%3E%3C/svg%3E");
  background-size:900px 400px;
  background-position:center 30%;
  background-repeat:no-repeat;
  opacity:.4
}

/* グリッド */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask:radial-gradient(120% 100% at 50% 20%,#000 25%,transparent 80%);mask:radial-gradient(120% 100% at 50% 20%,#000 25%,transparent 80%)}
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(130% 120% at 50% 0%,transparent 50%,rgba(0,0,0,.55) 100%)}

/* ── ナビ: v3 ミニピル様式 ──────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,40px);
  background:rgba(5,6,12,.55);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line)}
/* ← Works (左端ピル) */
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-disp);font-weight:600;font-size:13.5px;
  color:var(--ink-soft);text-decoration:none;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .25s,background .25s}
.back:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.back .ar{transition:transform .25s}.back:hover .ar{transform:translateX(-4px)}
.nav-logo{height:24px;display:block}
/* Contact ピル (右端) */
.nav-pills{display:flex;align-items:center;gap:8px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-cta,.nav-pills a{font-family:var(--font-disp);font-weight:600;font-size:13px;letter-spacing:.01em;
  color:var(--ink-soft);text-decoration:none;padding:7px 14px;border-radius:999px;
  transition:color .25s,background .25s}
.nav-cta:hover,.nav-pills a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
/* Contact は w-grad 塗り */
.nav-cta{color:var(--ink);background:var(--w-grad);
  transition:color .25s,transform .25s,filter .25s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
@media(max-width:430px){
  .nav{padding:11px 14px}
  .nav-logo{height:21px}
  .back,.nav-cta{font-size:12.5px;padding:7px 13px}}

/* ── Shell ──────────────────────────────────────────────────── */
.content{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,28px)}

/* ── void-panel 様式（§11-3: 暗いガラス + 1px ワールドグラデ枠 + HUD コーナー） ── */
.void-panel{
  position:relative;border-radius:20px;
  background:rgba(8,8,14,.55);
  -webkit-backdrop-filter:blur(14px) saturate(135%);backdrop-filter:blur(14px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -50px rgba(0,0,0,.95)}
/* 1px ワールドグラデ枠 (masked border) */
.void-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--w-grad3);opacity:.55;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* HUD コーナーマーク */
.hud-c{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.55;
  border-color:var(--w-a);border-style:solid;border-width:0}
.hud-c.tl{top:10px;left:10px;border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:4px}
.hud-c.tr{top:10px;right:10px;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:4px}
.hud-c.bl{bottom:10px;left:10px;border-bottom-width:1.5px;border-left-width:1.5px;border-bottom-left-radius:4px}
.hud-c.br{bottom:10px;right:10px;border-bottom-width:1.5px;border-right-width:1.5px;border-bottom-right-radius:4px}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding-top:clamp(48px,8vh,90px);padding-bottom:clamp(30px,5vh,50px)}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-tech);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  padding:6px 14px;border-radius:999px;
  background:rgba(232,90,168,.10);border:1px solid rgba(232,90,168,.22);margin-bottom:24px}
.badge .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--w-grad);
  box-shadow:0 0 10px 1px var(--w-a)}
/* 商品名は常にアイコンの右側（段落ちさせない）。長い名前はテキスト側で内部折返し */
.hero-top{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.hero-top .app-name{min-width:0;text-wrap:balance}
.app-icon{width:84px;height:84px;border-radius:22px;flex-shrink:0;display:block;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8),0 0 0 1px rgba(232,90,168,.25)}
.app-name{font-family:var(--font-disp);font-weight:700;font-size:clamp(34px,6vw,58px);line-height:1.02;margin:0;letter-spacing:-.01em;
  background:var(--w-grad3);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 14s ease-in-out infinite}
.app-tagline{font-family:var(--font-jp);font-weight:500;font-size:clamp(16px,2.2vw,21px);line-height:1.7;
  color:var(--ink-soft);margin:22px 0 0;max-width:46ch;text-wrap:pretty}
.app-tagline .hl{background:var(--w-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{font-family:var(--font-tech);font-weight:500;font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);
  padding:7px 14px;border-radius:10px;background:rgba(8,8,14,.55);border:1px solid var(--line)}
.chip b{color:var(--ink);font-weight:700}

/* ── CTA ────────────────────────────────────────────────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.btn{font-family:var(--font-disp);font-weight:600;font-size:15px;text-decoration:none;padding:14px 24px;border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.btn .ar{transition:transform .3s}.btn:hover .ar{transform:translateX(4px)}
/* primary: ワールドグラデ */
.btn-primary{color:#0b0a10;border:1px solid transparent;background:var(--w-grad);background-size:160% 100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--w-a)}
.btn-ghost{color:var(--ink);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:var(--w-b)}
.btn-soon{color:var(--ink-soft);border:1px dashed rgba(255,255,255,.16);background:transparent;cursor:default}
.btn-soon .gp{font-weight:700;color:var(--ink)}
.cta-note{font-family:var(--font-jp);font-size:12.5px;color:var(--ink-faint);margin:14px 0 0;line-height:1.7}

/* ── screenshots ─────────────────────────────────────────────── */
.shots{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:8px 0 0;padding:30px clamp(20px,4vw,40px);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(232,90,168,.10),transparent 70%);
  border:1px solid rgba(232,90,168,.16)}
.shots img{height:clamp(360px,52vh,520px);width:auto;max-width:46%;object-fit:contain;display:block;
  filter:drop-shadow(0 22px 34px -18px rgba(0,0,0,.9));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shots img:hover{transform:translateY(-6px)}
@media(max-width:620px){.shots img{max-width:80%;height:auto;width:78%}}

/* ── sections / blocks ──────────────────────────────────────── */
.block{padding-top:clamp(50px,8vh,84px);padding-bottom:clamp(50px,8vh,84px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-tech);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
.eyebrow .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--w-grad);
  box-shadow:0 0 10px 1px var(--w-a)}
/* ドットの呼吸ハロー（2026-06-11 Takumaさん指示）: ::after の光輪を transform/opacity
   のみで脈動させる＝軽量・world 色（--w-a）に自動追従（記事ページは琥珀になる） */
.badge .dot::after,.eyebrow .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle, var(--w-a) 0%, transparent 70%);
  opacity:.45;animation:dot-breathe 2.8s ease-in-out infinite;pointer-events:none}
@keyframes dot-breathe{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.85;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){
  .badge .dot::after,.eyebrow .dot::after{animation:none;opacity:.4}
}
.block-title{font-family:var(--font-jp);font-weight:700;font-size:clamp(24px,3.6vw,36px);line-height:1.3;margin:0 0 8px;color:var(--ink)}
.lead{font-family:var(--font-jp);font-weight:400;font-size:clamp(15px,1.9vw,17px);line-height:2;color:var(--ink-soft);margin:18px 0 0;max-width:62ch;text-wrap:pretty}
.lead b{color:var(--ink);font-weight:700}

/* ── feature カード: void-panel 様式 ────────────────────────── */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media(max-width:720px){.features{grid-template-columns:1fr}}
.feature{
  position:relative;padding:24px 24px 26px;border-radius:18px;overflow:hidden;
  background:rgba(8,8,14,.55);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 50px -34px rgba(0,0,0,.85);
  transition:box-shadow .4s,filter .4s}
/* 1px ワールドグラデ枠 */
.feature::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--w-grad);opacity:.45;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  transition:opacity .4s}
.feature:hover::before{opacity:.75}
.feature:hover{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 60px -30px rgba(232,90,168,.25)}
.feature .ic{font-size:26px;display:block;margin-bottom:12px}
.feature h3{font-family:var(--font-disp);font-weight:700;font-size:18px;margin:0 0 8px;color:var(--ink)}
.feature p{font-family:var(--font-jp);font-weight:400;font-size:14.5px;line-height:1.9;color:var(--ink-soft);margin:0;text-wrap:pretty}

/* ── pricing / pro ──────────────────────────────────────────── */
.price{margin-top:30px;padding:clamp(26px,4vw,38px);border-radius:22px;overflow:hidden;position:relative;
  background:rgba(8,8,14,.55);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 28px 70px -48px rgba(0,0,0,.9)}
.price::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--w-grad)}
/* ワールドグラデ枠 */
.price::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--w-grad);opacity:.45;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.price-tag{font-family:var(--font-disp);font-weight:700;font-size:clamp(24px,3.4vw,32px);
  background:var(--w-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-sub{font-family:var(--font-jp);font-size:14px;color:var(--ink-soft)}
.price-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}
@media(max-width:620px){.price-list{grid-template-columns:1fr}}
.price-list li{font-family:var(--font-jp);font-size:14.5px;line-height:1.7;color:var(--ink-soft);padding-left:24px;position:relative}
.price-list li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--w-a);font-size:13px}

/* ── status note ────────────────────────────────────────────── */
.note{margin-top:30px;padding:20px 22px;border-radius:16px;border:1px dashed rgba(232,90,168,.25);
  background:rgba(232,90,168,.06);
  font-family:var(--font-jp);font-size:14px;line-height:1.9;color:var(--ink-soft)}
.note b{color:var(--w-a)}

/* ── footer ─────────────────────────────────────────────────── */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:40px;
  padding:40px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.foot-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-disp);font-weight:600;font-size:14.5px;
  text-decoration:none;color:var(--ink);
  background:rgba(8,8,14,.55);border:1px solid rgba(232,90,168,.25);
  padding:12px 22px;border-radius:999px;
  transition:transform .3s,box-shadow .3s}
.foot-back:hover{transform:translateY(-2px);box-shadow:0 8px 30px -12px var(--w-a)}
.foot .mark{font-family:var(--font-disp);font-weight:600;font-size:14px;color:var(--ink-faint)}
.foot .mark b{background:var(--w-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* ── live UI demo (iframe) ──────────────────────────────────── */
.demo-stage{margin-top:30px;display:flex;justify-content:center}
.demo-stage iframe{width:100%;max-width:392px;height:806px;border:0;display:block;border-radius:40px;
  background:transparent;overflow:hidden;filter:drop-shadow(0 26px 54px rgba(0,0,0,.55))}
.demo-cap{font-family:var(--font-jp);font-size:13px;color:var(--ink-faint);margin:14px 0 0;text-align:center;line-height:1.8}

/* ── スクロールプログレスバー (ワールドグラデ) ──────────────── */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:var(--w-grad);box-shadow:0 0 16px rgba(232,90,168,.50)}

/* ── entrance + scroll reveal ───────────────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .badge{animation:riseIn .7s .04s both cubic-bezier(.2,.7,.2,1)}
.hero .hero-top{animation:riseIn .8s .14s both cubic-bezier(.2,.7,.2,1)}
.hero .app-tagline{animation:riseIn .8s .26s both cubic-bezier(.2,.7,.2,1)}
.hero .meta{animation:riseIn .8s .38s both cubic-bezier(.2,.7,.2,1)}
.hero .cta-row{animation:riseIn .8s .5s both cubic-bezier(.2,.7,.2,1)}
.app-icon{transition:transform .2s ease-out}
.features .feature.rv:nth-child(2){transition-delay:.1s}
.features .feature.rv:nth-child(3){transition-delay:.18s}
.features .feature.rv:nth-child(4){transition-delay:.26s}
.features .feature.rv:nth-child(5){transition-delay:.34s}
.features .feature.rv:nth-child(6){transition-delay:.42s}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* reveal: フェード + せり上がり */
.rv{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ── reduced-motion: 全停止 ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .bg::after,.bg::before{animation:none!important}
  .app-name,.progress{animation:none!important}
  .rv{transition:none;opacity:1;transform:none}
  .hero .badge,.hero .hero-top,.hero .app-tagline,.hero .meta,.hero .cta-row{animation:none!important}
  html{scroll-behavior:auto}
}