/* ============================================================
   Mothership — site design system
   ベース: kinoshita.studio/minamo（Apple / iOS調・SF Pro・ソフト影・ダーク対応）
   世界観アクセント: 金の無限 ∞ / KV画像 / rose・teal
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",system-ui,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  /* Cursor調ダーク（背景は近黒・金アクセントは残す） */
  --bg:#0a0a0b; --surface:#141416; --surface-2:#1c1c20;
  --text:#ededee; --text-2:#9a9aa2; --faint:#6a6a72;
  --hair:rgba(255,255,255,.09);
  --gold:#c2a25b; --gold-2:#d8bd7a; --rose:#cf7491; --teal:#48a89e; --accent:#c2a25b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.4);
  --shadow-lg:0 2px 8px rgba(0,0,0,.35),0 40px 90px rgba(0,0,0,.5);
  --maxw:1040px; --radius:18px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.7;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.mono{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--gold) 30%,transparent)}

/* nav — Apple風 半透明バー */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  height:48px;padding:0 1.4rem;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
nav .brand{display:flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:.14em;font-size:.82rem}
nav .links{display:flex;gap:1.6rem;align-items:center}
nav .links a{font-size:.82rem;font-weight:500;letter-spacing:.01em;color:var(--text-2);transition:color .15s}
nav .links a:hover,nav .links a.on{color:var(--text)}
nav .langtog{font:inherit;font-size:.7rem;font-weight:600;letter-spacing:.05em;color:var(--text-2);background:transparent;
  border:1px solid var(--hair);border-radius:999px;padding:.2rem .62rem;cursor:pointer;transition:color .15s,border-color .15s}
nav .langtog:hover{color:var(--text);border-color:color-mix(in srgb,var(--gold) 40%,var(--hair))}
@media(max-width:640px){nav .links a.hide-sm{display:none}nav .links{gap:1.1rem}}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:740px}
section{padding:5rem 0}
.center{text-align:center}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
h1,h2,h3{font-weight:600;line-height:1.14;letter-spacing:-.02em;color:var(--text)}
.display{font-weight:650;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.25rem);letter-spacing:-.012em}
.lead{font-size:clamp(.98rem,1.1vw,1.08rem);color:var(--text-2);line-height:1.8;font-weight:400}
.sub{color:var(--faint)}
em{font-style:normal;color:var(--gold);font-weight:600}
.rose{color:var(--rose)} .teal{color:var(--teal)}

/* buttons — iOS pill */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;letter-spacing:0;
  padding:.6rem 1.3rem;border-radius:999px;border:1px solid transparent;transition:transform .15s,background .15s,opacity .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary,.btn.gold{background:var(--gold);color:#15110a}
.btn.primary:hover,.btn.gold:hover{opacity:.9}
.btn.ghost{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.btn.ghost:hover{background:color-mix(in srgb,var(--text) 12%,transparent)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden}
.hero .kv{position:absolute;inset:0;z-index:0}
.hero .kv img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,17,22,.16) 0%,rgba(12,17,22,0) 28%,rgba(12,17,22,.06) 58%,rgba(12,17,22,.72) 100%)}
.hero .inner{position:relative;z-index:2;padding:0 1.4rem 9vh;color:#fff;max-width:900px}
.hero .wordmark{font-weight:600;letter-spacing:.18em;font-size:clamp(1.3rem,3.6vw,2.1rem);text-indent:.18em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero .htag{font-weight:600;letter-spacing:-.025em;font-size:clamp(1.55rem,3.6vw,2.5rem);margin-top:.7rem;line-height:1.18;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .hsub{margin-top:1rem;font-size:clamp(.95rem,1.4vw,1.1rem);color:#eef2f5;opacity:.95;line-height:1.7;font-weight:400;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero .htag em,.hero .hsub em{color:#f1d99a}
.hero .cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem}
.hero .btn.ghost{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.26)}
.scrolldot{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:2;color:#fff;opacity:.7;font-size:.7rem;letter-spacing:.16em;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* glow（Apple/MINAMO風の淡い放射） */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 46% at 70% 6%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 70%)}

/* status badge */
.badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.03em;
  color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);padding:.34rem .85rem;border-radius:999px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.notice{display:flex;gap:.7rem;align-items:flex-start;background:color-mix(in srgb,var(--gold) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);border-radius:14px;padding:1rem 1.2rem;font-size:.92rem;color:var(--text-2)}
.notice b{color:var(--gold)}

/* text hero（画像の上に文字を載せない方針）＋ 画像は単体で見せる */
.texthero{padding:3.2rem 1.5rem 2rem;text-align:center}
.kvfull+.texthero{padding-top:2.8rem}
.texthero .mark{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:.16em;font-size:.82rem;color:var(--text-2);margin-bottom:1.3rem}
.texthero h1{font-weight:600;letter-spacing:-.03em;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.13}
.texthero .lead{margin:1.1rem auto 0;max-width:580px}
.texthero .cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.kvfull{width:100%;max-width:800px;margin:1.3rem auto 0;padding:0 1.5rem;line-height:0}
.kvfull img{width:100%;display:block;border-radius:16px;box-shadow:var(--shadow-lg);border:1px solid var(--hair)}
.showcase{max-width:800px;margin:0 auto;padding:0 1.5rem}
.showcase figure{margin:0}
.showcase img{width:100%;border-radius:16px;box-shadow:var(--shadow-lg);border:1px solid var(--hair)}
.showcase figcaption{text-align:center;color:var(--faint);font-size:.8rem;margin-top:.9rem}

/* blocks */
.kicker{max-width:720px;margin:0 auto}
.grid{display:grid;gap:1.1rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.cols-3,.cols-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--gold) 30%,var(--hair))}
.card .n{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--gold)}
.card h3{margin:.5rem 0 .4rem}
.card p{color:var(--text-2);font-size:.9rem;line-height:1.7}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2rem}}
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair);box-shadow:var(--shadow-lg)}

.band{background:#101012;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);color:#eef3f7}
.band h1,.band h2,.band h3,.band .display,.band .quote{color:#f4f7fa}
.band .eyebrow{color:#d9bd76}
.band .lead{color:#c4d0d8}
.band .sub{color:#8b98a2}
.band em{color:#e7cf90}
.band code,.band .code{color:#e7dcc6}

.quote{font-weight:600;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.55;letter-spacing:-.018em}

/* steps */
.steps{display:flex;flex-direction:column;gap:.9rem;counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--hair);border-radius:18px;padding:1.5rem 1.6rem;box-shadow:var(--shadow)}
.step .num{counter-increment:step;font-weight:700;color:var(--gold);font-size:1.2rem;line-height:1.3;font-variant-numeric:tabular-nums}
.step .num::before{content:counter(step,decimal-leading-zero)}
.step h3{font-size:1.12rem;margin-bottom:.3rem}
.step p{color:var(--text-2);font-size:.95rem;line-height:1.75}
code,.code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);padding:.12em .45em;border-radius:6px}
.band code,.band .code{background:rgba(255,255,255,.12)}
pre{font-family:var(--mono);font-size:.82rem;line-height:1.7;background:#0c1116;color:#e7dcc6;
  padding:1.1rem 1.3rem;border-radius:14px;overflow-x:auto;margin:.6rem 0;border:1px solid rgba(255,255,255,.06)}

/* full-bleed image band */
.imgband{position:relative;height:44svh;min-height:260px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.imgband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.imgband .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,17,22,.34),rgba(12,17,22,.06) 50%,rgba(12,17,22,.5))}
.imgband .cap{position:relative;z-index:2;color:#fff;padding:0 1.4rem;max-width:760px}
.imgband .cap .t{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,3.8vw,2.5rem);line-height:1.35;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.imgband .cap .s{margin-top:.7rem;font-size:1rem;color:#eef2f5;opacity:.95;text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* footer */
footer{border-top:1px solid var(--hair);padding:3.5rem 0 4rem;text-align:center}
footer .fmark{font-weight:600;letter-spacing:.18em;font-size:.95rem}
footer .fsub{color:var(--faint);font-size:.8rem;margin-top:.7rem;line-height:1.9}
footer .flinks{display:flex;gap:1.4rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
footer .flinks a{font-size:.8rem;font-weight:500;color:var(--text-2)}
footer .flinks a:hover{color:var(--gold)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.scrolldot{animation:none}}