/* ============================================================================
   KAGI design tokens — derived from mobiAI's live design system (mobiai.co.jp).
   Shared foundation consumed by BOTH the marketing landing (styles.css) and the
   demo admin console (admin.css). Change a token here → both surfaces move together.

   Source values lifted from mobiai.co.jp/_astro/index.css:
     --accent #2b5cff / --accent-2 #7b3ff2, blue→purple gradients, Space Grotesk +
     Noto Sans JP, radius 12/20/28, rhythm 120, glow/marquee/float/pulse motion.
   KAGI keeps its own financial-legibility semantics (pine = gain, seal = loss) so
   money never loses meaning — those are additive, not from mobiAI.
   Fonts load via Google Fonts <link> in each page head (see CSP in _headers).
   ========================================================================== */
:root{
  /* ---- type ---- */
  --font-display:"Space Grotesk","Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-body:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic","Malgun Gothic","Noto Sans KR",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,ui-monospace,monospace;

  /* ---- brand / ink ---- */
  --ink:#14162B; --ink-2:#4A4D66; --ink-3:#61647d;
  --bg:#FBFBFD; --bg-2:#F4F6FC; --white:#FFFFFF;
  --muted:#6B6E85; --muted-2:#8A8DA3;
  --line:rgb(20 22 43 / 8%); --line-strong:rgb(20 22 43 / 12%); --line-2:rgb(20 22 43 / 5%);

  /* ---- accent (mobiAI electric blue → violet) ---- */
  --accent:#2B5CFF; --accent-2:#7B3FF2; --accent-soft:rgb(43 92 255 / 8%);
  --accent-tint:rgb(43 92 255 / 13%); --accent-ink:#1E45C8;
  --pink:#FF6FAE; --pink-2:#9E7DFF;
  --gradient:linear-gradient(135deg,var(--accent),var(--accent-2));
  --gradient-cta:linear-gradient(120deg,var(--accent),var(--accent-2));
  --gradient-light:linear-gradient(135deg,#8FA8FF,#C9B3FF);
  --gradient-text:linear-gradient(120deg,#2B5CFF 0%,#7B3FF2 60%,#FF6FAE 120%);

  /* ---- financial semantics (KAGI-specific, kept from the editorial build) ---- */
  --pine:#1E9E6A; --pine-soft:rgb(30 158 106 / 12%); --pine-light:#57d19b;
  --seal:#E5484D; --seal-soft:rgb(229 72 77 / 9%);
  --gold:#B98900;

  /* ---- on-dark (navy anchor sections) ---- */
  --on-dark:#fff; --on-dark-2:#A9ACC4; --on-dark-3:#D8DAEA; --on-dark-accent:#8FA8FF;
  --ink-deep:#0C0E1D;

  /* ---- geometry ---- */
  --radius:12px; --radius-card:20px; --radius-lg:28px; --radius-pill:999px;
  --content-max:1240px; --pad-x:24px;
  --rhythm:120px;

  /* ---- elevation (soft, colored on hover — mobiAI feel) ---- */
  --shadow-sm:0 1px 2px rgb(20 22 43 / 5%);
  --shadow-card:0 10px 30px -18px rgb(20 22 43 / 30%);
  --shadow-pop:0 22px 54px -30px rgb(20 22 43 / 40%);
  --shadow-glow:0 16px 40px rgb(43 92 255 / 22%);
  --shadow-btn-hover:0 16px 40px rgb(43 92 255 / 38%);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s; --t:.25s; --t-slow:.35s;
}
@media(max-width:900px){:root{--rhythm:80px}}
@media(max-width:600px){:root{--pad-x:20px;--rhythm:64px}}

/* ---- keyframes (mobiAI motion vocabulary) ---- */
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-22px,0)}}
@keyframes heroFloatB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,20px,0)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgb(43 92 255 / 45%)}70%{box-shadow:0 0 0 9px rgb(43 92 255 / 0%)}100%{box-shadow:0 0 0 0 rgb(43 92 255 / 0%)}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- reusable primitives ---- */
.grad-text{background:var(--gradient-text);background-size:180% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradShift 8s var(--ease-out) infinite}

/* floating gradient glow blobs behind heroes / CTAs */
.glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
.glow--a{background:radial-gradient(circle,var(--accent) 0%,transparent 70%);animation:heroFloat 8s ease-in-out infinite}
.glow--b{background:radial-gradient(circle,var(--accent-2) 0%,transparent 70%);animation:heroFloatB 9s ease-in-out infinite}
.glow--pink{background:radial-gradient(circle,var(--pink) 0%,transparent 70%)}

/* live status dot */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulseDot 2s infinite}

/* scroll reveal — mobiAI's slow expo ease */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* marquee (partner / proof strip) */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:0;animation:marqueeScroll 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:10px;padding:0 26px;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;color:var(--ink-2);font-size:15px}
.marquee__star{color:var(--accent);opacity:.5}

@media(prefers-reduced-motion:reduce){
  .grad-text,.glow,.pulse-dot,.marquee__track{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}