*{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Noto Sans JP',sans-serif;color:#0a3b5c;background:#eef7fc;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  a{color:#009fe3;text-decoration:none}
  a:hover{color:#0077b0}
  ::selection{background:#009fe3;color:#fff}
  .zen{font-family:'Zen Kaku Gothic New',sans-serif}
  .sg{font-family:'Space Grotesk',sans-serif}
  /* ---- motion tokens (mirrors components/landing/Reveal.tsx) ---- */
  :root{
    --ease:cubic-bezier(0.22,1,0.36,1);
    --rv-dur:.8s;        /* headings, cards */
    --rv-dur-fine:.55s;  /* details riding inside a card */
    --rv-y:24px;
    --rv-y-fine:10px;
  }

  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

  /* smooth hover for elements that declare style-hover */
  [style-hover]{transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}

  /* ---- scroll progress bar ---- */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
    background:linear-gradient(90deg,#009fe3,#5fc4ec);transform-origin:left;
    transition:width .1s linear;pointer-events:none}

  /* ---- sticky header scroll state ---- */
  header[data-nav]{transition:background .35s ease,box-shadow .35s ease}
  header[data-nav].scrolled{background:rgba(245,246,250,0.92);box-shadow:0 8px 30px rgba(10,59,92,0.08)}
  header[data-nav] > div{transition:padding .35s ease}
  header[data-nav].scrolled > div{padding-top:13px;padding-bottom:13px}

  /* ---- header CTA turns solid blue once the hero has scrolled past ---- */
  header[data-nav] .nav-cta{transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
  header[data-nav].past-hero .nav-cta{background:#009fe3!important;border-color:#009fe3!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,159,227,0.38)!important}
  header[data-nav].past-hero .nav-cta:hover{background:#0a3b5c!important;border-color:#0a3b5c!important;color:#fff!important}

  /* ---- scroll reveal (only active once JS marks the doc ready) ---- */
  /* observed layer: one IntersectionObserver entry each */
  .reveal-ready [data-reveal]{opacity:0;transform:translate3d(0,var(--rv-y),0);
    transition:opacity var(--rv-dur) var(--ease) var(--rv-delay,0ms),
               transform var(--rv-dur) var(--ease) var(--rv-delay,0ms),
               filter var(--rv-dur) var(--ease) var(--rv-delay,0ms)}
  .reveal-ready [data-reveal="soft"]{filter:blur(6px)}
  .reveal-ready [data-reveal="scale"]{transform:translate3d(0,var(--rv-y),0) scale(.985)}
  .reveal-ready [data-reveal="left"]{transform:translate3d(-28px,0,0)}
  .reveal-ready [data-reveal="right"]{transform:translate3d(28px,0,0)}
  .reveal-ready [data-reveal="line"]{opacity:1;transform:scaleX(0);transform-origin:left center;--rv-dur:.9s}
  .reveal-ready [data-reveal].in{opacity:1;transform:none;filter:none}

  /* detail layer: rides on its observed ancestor, no observer of its own */
  .reveal-ready [data-rv-child]{opacity:0;transform:translate3d(0,var(--rv-y-fine),0);
    transition:opacity var(--rv-dur-fine) var(--ease) var(--rv-delay,0ms),
               transform var(--rv-dur-fine) var(--ease) var(--rv-delay,0ms)}
  .reveal-ready [data-reveal].in [data-rv-child]{opacity:1;transform:none}
  /* `transition` is one property: a detail that also hovers needs both sets in one
     declaration, or the reveal rule silently drops the hover easing */
  .reveal-ready [data-rv-child][style-hover]{
    transition:opacity var(--rv-dur-fine) var(--ease) var(--rv-delay,0ms),
               transform var(--rv-dur-fine) var(--ease) var(--rv-delay,0ms),
               background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}

  /* cards lift on hover via `translate`, kept off `transform` so the reveal owns transform */
  .reveal-ready [data-reveal].card{
    transition:opacity var(--rv-dur) var(--ease) var(--rv-delay,0ms),
               transform var(--rv-dur) var(--ease) var(--rv-delay,0ms),
               translate .3s var(--ease),box-shadow .3s var(--ease)}
  .card{transition:translate .3s var(--ease),box-shadow .3s var(--ease)}

  /* hairline rules that draw in from the left */
  .rule{height:1px;width:100%;background:#d3e4ef}
  .rule-dark{background:rgba(255,255,255,0.08)}

  [data-parallax]{will-change:transform}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal-ready [data-reveal],
    .reveal-ready [data-rv-child]{opacity:1 !important;transform:none !important;
      filter:none !important;transition:none !important}
    [data-parallax]{transform:none !important;will-change:auto}
    [style*="animation:rise"]{animation:none !important}
  }