/* Franca AI — site design system
   Stripe-inspired, branded for Franca (violet + teal accents) */

:root {
  /* Brand — deep royal blue, calm and grounded */
  --primary: #235AC7;
  --primary-deep: #1C4B9C;
  --primary-press: #122F68;
  --primary-soft: #6288D5;
  --primary-subdued: #E8EDF7;
  --primary-bg-hover: #B5C4E3;
  --brand-dark-900: #16183f;
  --teal: #9CD0CC;
  --teal-deep: #6CAAA5;
  --teal-bg: #ECF3F1;
  --deep-purple: #6E1A87;
  --ruby: #ea2261;
  --magenta: #f96bee;

  /* Surface */
  --canvas: #fafbfd;
  --canvas-soft: #f1f4f9;
  --canvas-cream: #f5e9d4;
  --surface-card: #ffffff;
  --hairline: #e3e8ee;
  --hairline-input: #cbd6e3;

  /* Text — WCAG 2.1 AA on white:
     ink 13:1 / ink-secondary 10:1 / ink-mute 5.5:1 (body 14px+ OK)
     / ink-mute-2 4.3:1 (for decorative / uppercase meta) */
  --ink: #0d253d;
  --ink-secondary: #273951;
  --ink-mute: #5a6a82;
  --ink-mute-2: #6f7d94;
  --ink-fade: rgba(13, 37, 61, 0.75);      /* muted color for "cover styling" such as the hero English text */
  --primary-fade: rgba(35, 90, 199, 0.62); /* same, for em */
  --on-primary: #ffffff;

  /* Section padding — unified tokens for vertical rhythm
     tight: for tightening the hero bottom or sub-sections
     base: normal section (default)
     loose: for special weighting such as company overview / CEO message
     mobile: shared shrink for all sections on mobile */
  --section-pad-tight: 80px;
  --section-pad: 96px;
  --section-pad-loose: 120px;
  --section-pad-mobile: 64px;
  --section-pad-mobile-tight: 48px;  /* for tightening further on mobile, e.g. the hero bottom */

  /* Container horizontal padding — shrinks in stages by viewport width.
     .container / .container-narrow / .nav-inner / .nav-links mobile panel /
     .site-cta-inner / .footer / .page-hero / .hero-inner (index.html)
     every block with horizontal padding references this token.
     Overriding it in :root applies everywhere at once, so consumers only need var(--container-pad). */
  --container-pad: 24px;                /* desktop default */
  --container-pad-tablet-wide: 64px;    /* 769–1100px override (portrait/landscape tablet) */
  --container-pad-tablet: 20px;         /* ≤768px override */
  --container-pad-mobile: 16px;         /* ≤480px override */
  --nav-height: 70px;

  /* Vertical rhythm within a section — unified gaps for eyebrow → heading → body */
  --gap-eyebrow: 14px;       /* between eyebrow and the heading right after it */
  --gap-head-lede: 16px;     /* between heading and lede / lead text */
  --gap-head-body: 32px;     /* between heading block and body block */

  /* Text line-height — fixed at 3 levels by use case */
  --lh-tight: 1.5;           /* captions / small labels (14px and below) */
  --lh-body: 1.7;            /* standard body (15-16px) */
  --lh-prose: 1.85;          /* long-form essays such as the CEO message (16-17px) */

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(0,55,112,0.08);
  --shadow-2: 0 8px 24px rgba(0,55,112,0.08), 0 2px 6px rgba(0,55,112,0.04);
  --shadow-3: 0 24px 60px rgba(15, 30, 70, 0.16), 0 4px 12px rgba(15,30,70,0.06);

  /* Type */
  --font-display: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  /* Safety net against unexpected horizontal scroll. Even when a child's
     overflow:hidden doesn't take effect, keep the page from overflowing horizontally. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
iframe, video { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); }
button { font-family: inherit; }

/* === Focus visibility (keyboard only) === */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn-on-dark:focus-visible,
.culture-band a:focus-visible,
.pull-quote a:focus-visible,
.card-dark a:focus-visible {
  outline-color: var(--teal);
}

/* === Type tier === */
.t-display-xxl { font-size: clamp(40px, 6vw, 72px); font-weight: 300; line-height: 1.02; letter-spacing: -2px; }
.t-display-xl  { font-size: clamp(36px, 4.6vw, 56px); font-weight: 300; line-height: 1.06; letter-spacing: -1.4px; }
.t-display-lg  { font-size: clamp(28px, 3.2vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -0.8px; }
.t-display-md  { font-size: 28px; font-weight: 300; line-height: 1.15; letter-spacing: -0.4px; }
.t-heading-lg  { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; }
.t-heading-md  { font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.1px; }
.t-body-lg     { font-size: 17px; font-weight: 400; line-height: 1.55; }
.t-body        { font-size: 15px; font-weight: 400; line-height: 1.6; }
.t-body-sm     { font-size: 14px; font-weight: 400; line-height: 1.5; }
.t-tabular     { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.3px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.t-caption     { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-mute); }
.t-eyebrow     { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.t-mono        { font-family: var(--font-mono); font-feature-settings: "tnum"; }

.muted { color: var(--ink-mute); }
.ink   { color: var(--ink); }
.violet { color: var(--primary); }

/* === Emphasis (sitewide v1) ===
   <em>      : keyword emphasis — violet, JP normal / EN italic (per-case override)
   <strong>  : structurally important phrases / proper nouns — ink, weight 500, no decoration
   <em> on dark bg switches to teal (.culture-band, .pull-quote, .card-dark) */
em {
  font-style: normal;
  color: var(--primary);
}
strong {
  font-weight: 500;
  color: var(--ink);
  background: none;
}
.culture-band em,
.pull-quote em,
.card-dark em { color: var(--teal); }

/* English accents — slightly heavier, condensed feel */
.en {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.04em;
}
.en-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}

/* === Layout === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--container-pad); }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--container-pad); }

section { padding: var(--section-pad) 0; }
/* When jumping to a section via an anchor link, offset the scroll position by the
   nav height so the eyebrow / heading isn't hidden under the sticky nav */
section[id] { scroll-margin-top: var(--nav-height); }
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --container-pad: var(--container-pad-tablet-wide); }
}
@media (max-width: 768px) {
  :root { --container-pad: var(--container-pad-tablet); }
  section { padding: var(--section-pad-mobile) 0; }
}
@media (max-width: 480px) {
  :root { --container-pad: var(--container-pad-mobile); }
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  transition: all 160ms cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.btn-primary,
a.btn-primary,
a.btn-primary:visited {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover,
a.btn-primary:hover { background: var(--primary-deep); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(35,90,199,0.3); }
.btn-primary:active { background: var(--primary-press); transform: translateY(0); }

.btn-secondary {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.btn-secondary:hover { background: var(--canvas); border-color: var(--ink-mute-2); color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  padding: 8px 4px;
}
.btn-ghost:hover { color: var(--primary-deep); }
.btn-ghost::after {
  content: "→";
  display: inline-block;
  transition: transform 160ms;
}
.btn-ghost:hover::after { transform: translateX(3px); }

/* === Inline arrow link (in-body links like "Read our philosophy →") ===
   More understated than .btn-ghost, blending into the body flow.
   Takes 8px top/bottom padding to ensure a tap target, and keeps border-bottom as a visual underline.
   The arrow is auto-added via ::after (don't write "→" manually in the HTML). */
.t-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--primary);
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: gap 200ms, color 160ms;
}
.t-link-arrow:hover { color: var(--primary-deep); gap: 9px; }
.t-link-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform 160ms;
}
.t-link-arrow:hover::after { transform: translateX(2px); }

.btn-on-dark {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}
.btn-on-dark:hover { background: rgba(255,255,255,0.16); }

.btn-sm { padding: 12px 16px; font-size: 14px; }
.btn-lg { padding: 14px 22px; font-size: 16px; }

/* === Pills / tags === */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-subdued);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
.pill-teal {
  background: var(--teal-bg);
  color: #2a7a72;
}
.pill-cream { background: var(--canvas-cream); color: #6b4f1d; }
.pill-coming {
  background: var(--canvas);
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* inline marker that appends "(coming)" within lists / tags */
.coming-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  opacity: 0.85;
  margin-left: 4px;
}
.pill-dot::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
}

/* === Cards === */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all 200ms;
}
.card:hover {
  border-color: var(--primary-bg-hover);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card-dark {
  background: var(--brand-dark-900);
  color: var(--on-primary);
  border-radius: var(--r-lg);
  padding: 32px;
}

.card-cream {
  background: var(--canvas-cream);
  border-radius: var(--r-lg);
  padding: 32px;
}

/* === Nav === */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(227,232,238,0.6);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--container-pad);
  max-width: 1200px;
  margin: 0 auto;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-left: auto;
}
.nav-links > a {
  color: var(--ink-secondary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nav-links > a:hover { color: var(--primary); }
.nav-links > a[aria-current="page"] { color: var(--primary); }
/* .nav-cta sits as the last flex item within .nav-links, so the parent's
   gap: 28px handles the space on its left. margin-left is unneeded */
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* === Mobile nav toggle (hamburger) ===
   display: none on desktop. Toggles via .nav-links and body.nav-open.
   - aria-expanded is synced in JS (assets/nav.js)
   - the panel slides down from just below the header
   - while open, lock the body's vertical scroll to prevent "the page showing through"
*/
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--canvas-soft); }
.nav-toggle .bar {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 160ms;
}
.nav-toggle .bar:nth-child(1) { top: 14px; }
.nav-toggle .bar:nth-child(2) { top: 19.5px; }
.nav-toggle .bar:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  /* backdrop-filter creates a containing block for fixed descendants, so drop it on mobile.
     Without this, .nav-links (position: fixed) computes its bottom: 0 inside
     .nav (height ≈ 70px) and the panel collapses */
  .nav { backdrop-filter: none; background: rgba(255, 255, 255, 0.96); }

  /* Mobile menu panel — slides down from below the sticky header */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: 0;
    padding: 24px var(--container-pad) 48px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--hairline);
    transform: translateY(-110%);
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
    z-index: 99;
    overflow-y: auto;
    visibility: hidden;
  }
  body.nav-open .nav-links {
    transform: translateY(0);
    visibility: visible;
  }
  .nav-links > a {
    padding: 18px 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
  }
  /* keep the border on the last <a> link within .nav-links (Company),
     using it as a visual divider from the .nav-cta below it */
  .nav-links > a[aria-current="page"] { color: var(--primary); }

  /* Lock the page scroll while the menu is open */
  body.nav-open { overflow: hidden; }
  /* When the menu is open, sticky can drift from the top of the viewport due to the
     combination of body overflow:hidden / overflow-x:clip, so pin it explicitly
     to the very top with fixed. This keeps the close button (= hamburger) and
     logo always on screen. */
  body.nav-open .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* place the CTA full-width at the end of the panel */
  .nav-links .nav-cta {
    margin-top: 24px;
    width: 100%;
  }
  .nav-links .nav-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle .bar,
  .nav-links { transition: none; }
}

/* === Site CTA (shared contact CTA across all pages) ===
   Aligns the eyebrow → h2 → lede → actions rhythm;
   the heading / lede stay consistent by simply swapping them per page context. */
.site-cta {
  padding: var(--section-pad) 0;
  background: linear-gradient(180deg, var(--canvas), var(--canvas-soft));
  text-align: center;
}
.site-cta-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.site-cta .t-eyebrow {
  margin-bottom: var(--gap-eyebrow);
}
.site-cta h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.45;
  margin: 0 auto var(--gap-head-lede);
  max-width: 880px;
  text-wrap: balance;
}
.site-cta .lede {
  max-width: 860px;
  margin: 0 auto 28px;
  color: var(--ink-secondary);
  font-size: 17px;
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.site-cta .actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .site-cta .actions { flex-direction: column; }
  .site-cta .actions .btn { width: 100%; justify-content: center; }
}

/* === Footer === */
.footer {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  padding: 64px var(--container-pad) 32px;
}
.footer-inner,
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col h5 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-secondary); font-size: 14px; }
.footer-col a:hover { color: var(--primary); }
.footer-brand img { height: 24px; }
.footer-tag { color: var(--ink-mute); font-size: 13px; margin-top: 14px; max-width: 280px; }
.footer-bottom {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-mute);
}

@media (max-width: 768px) {
  .footer-inner,
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* === Hairlines/dividers === */
.hr { height: 1px; background: var(--hairline); border: 0; }

/* === Info table (company info dl/dt/dd) ===
   Shared table that stacks fixed facts (company name, CEO, address, business, etc.) vertically.
   Currently dedicated to the company-info section of about.html (220px dt). */
.info-table {
  border-top: 1px solid var(--ink);
  margin: 0;
}
.info-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.info-row dt {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.info-row dd {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.info-row dd .secondary {
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .info-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
}


/* === Section header (eyebrow + heading) ===
   Shared pattern that groups an eyebrow and the heading right after it with a unified gap.
   Deployed across all pages in the form
   `<div class="section-head"><div class="t-eyebrow violet">…</div><h2>…</h2></div>`. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-eyebrow);
  margin-bottom: 56px;
  max-width: 720px;
}
.section-head--wide { max-width: none; }
.section-head--wide .lede { max-width: none; }
.section-head > * { margin-top: 0; margin-bottom: 0; }
.section-head h2,
.section-head .lede { text-wrap: pretty; }
.section-head .eyebrow-row {
  display: flex; align-items: center; gap: 12px;
  color: var(--primary);
}
.section-head .eyebrow-row::before {
  content: "";
  width: 24px; height: 1px; background: currentColor;
}

/* === Page hero (small, for sub pages) === */
.page-hero {
  position: relative;
  padding: 96px var(--container-pad) 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 768px) {
  .page-hero { padding: var(--section-pad-mobile) var(--container-pad) var(--section-pad-mobile-tight); }
}
@media (max-width: 480px) {
  .page-hero { padding: 48px var(--container-pad) 32px; }
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* === Gradient mesh === */
.mesh-bg {
  --mx: 0px; --my: 0px;          /* cursor offset, set by JS in cursor mode */
  position: absolute;
  inset: -10% 0 auto 0;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  filter: blur(50px) saturate(1.1);
  opacity: 0.95;
  will-change: filter, transform;
  transition: filter 600ms ease;
}
.mesh-bg svg { width: 100%; height: 100%; display: block; }

.mesh-bg svg rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ========== Pattern: drift (default) — organic floating ========== */
body[data-bg-anim="drift"] .mesh-bg { animation: meshBreathe 14s ease-in-out infinite alternate; }
body[data-bg-anim="drift"] .mesh-bg svg rect:nth-of-type(2) { animation: meshDriftA 11s ease-in-out infinite alternate; }
body[data-bg-anim="drift"] .mesh-bg svg rect:nth-of-type(3) { animation: meshDriftB 13s ease-in-out infinite alternate; }
body[data-bg-anim="drift"] .mesh-bg svg rect:nth-of-type(4) { animation: meshDriftC 9s  ease-in-out infinite alternate; }
body[data-bg-anim="drift"] .mesh-bg svg rect:nth-of-type(5) { animation: meshDriftD 15s ease-in-out infinite alternate; }
body[data-bg-anim="drift"] .mesh-bg svg rect:nth-of-type(6) { animation: meshDriftE 12s ease-in-out infinite alternate; }

@keyframes meshBreathe {
  0%   { filter: blur(50px) saturate(1.1)  hue-rotate(0deg);   transform: scale(1)     translate3d(0, 0, 0); }
  50%  { filter: blur(64px) saturate(1.25) hue-rotate(20deg);  transform: scale(1.08)  translate3d(-3%, -1.5%, 0); }
  100% { filter: blur(54px) saturate(1.0)  hue-rotate(-15deg); transform: scale(1.05)  translate3d(3%, 1.2%, 0); }
}
@keyframes meshDriftA { 0% { transform: translate3d(-8%,-5%,0)  scale(0.9);  } 100% { transform: translate3d(14%,9%,0)   scale(1.25); } }
@keyframes meshDriftB { 0% { transform: translate3d(6%,-4%,0)   scale(1.1);  } 100% { transform: translate3d(-15%,8%,0)  scale(0.85); } }
@keyframes meshDriftC { 0% { transform: translate3d(8%,6%,0)    scale(0.92); } 100% { transform: translate3d(-12%,-10%,0) scale(1.22); } }
@keyframes meshDriftD { 0% { transform: translate3d(-6%,8%,0)   scale(1.15); } 100% { transform: translate3d(10%,-9%,0)  scale(0.88); } }
@keyframes meshDriftE { 0% { transform: translate3d(5%,4%,0)    scale(1);    } 100% { transform: translate3d(-8%,-12%,0) scale(1.18); } }

/* ========== Pattern: drift-slow — beefed-up drift / "you don't notice it, but it's surely moving" ========== */
body[data-bg-anim="drift-slow"] .mesh-bg { animation: meshBreatheSlow 30s ease-in-out infinite alternate; }
body[data-bg-anim="drift-slow"] .mesh-bg svg rect:nth-of-type(2) { animation: meshDriftSlowA 22s ease-in-out infinite alternate; }
body[data-bg-anim="drift-slow"] .mesh-bg svg rect:nth-of-type(3) { animation: meshDriftSlowB 26s ease-in-out infinite alternate; }
body[data-bg-anim="drift-slow"] .mesh-bg svg rect:nth-of-type(4) { animation: meshDriftSlowC 19s ease-in-out infinite alternate; }
body[data-bg-anim="drift-slow"] .mesh-bg svg rect:nth-of-type(5) { animation: meshDriftSlowD 28s ease-in-out infinite alternate; }
body[data-bg-anim="drift-slow"] .mesh-bg svg rect:nth-of-type(6) { animation: meshDriftSlowE 24s ease-in-out infinite alternate; }

@keyframes meshBreatheSlow {
  0%   { filter: blur(56px) saturate(1.0)  hue-rotate(0deg);  transform: scale(1)    translate3d(0, 0, 0); }
  50%  { filter: blur(68px) saturate(1.05) hue-rotate(0deg);  transform: scale(1.06) translate3d(-2%, -1%, 0); }
  100% { filter: blur(58px) saturate(0.95) hue-rotate(0deg);  transform: scale(1.03) translate3d(2%, 1%, 0); }
}
@keyframes meshDriftSlowA { 0% { transform: translate3d(-12%,-8%,0)  scale(0.88); } 100% { transform: translate3d(20%,12%,0)  scale(1.30); } }
@keyframes meshDriftSlowB { 0% { transform: translate3d(10%,-6%,0)   scale(1.15); } 100% { transform: translate3d(-22%,12%,0) scale(0.82); } }
@keyframes meshDriftSlowC { 0% { transform: translate3d(12%,9%,0)    scale(0.90); } 100% { transform: translate3d(-18%,-14%,0) scale(1.28); } }
@keyframes meshDriftSlowD { 0% { transform: translate3d(-10%,12%,0)  scale(1.20); } 100% { transform: translate3d(15%,-13%,0) scale(0.85); } }
@keyframes meshDriftSlowE { 0% { transform: translate3d(8%,6%,0)     scale(1);    } 100% { transform: translate3d(-12%,-16%,0) scale(1.22); } }

/* ========== Pattern: aurora — long, slow flow with strong hue shift ========== */
body[data-bg-anim="aurora"] .mesh-bg { animation: auroraSweep 22s linear infinite; filter: blur(70px) saturate(1.3); }
body[data-bg-anim="aurora"] .mesh-bg svg rect:nth-of-type(2) { animation: auroraA 18s ease-in-out infinite; }
body[data-bg-anim="aurora"] .mesh-bg svg rect:nth-of-type(3) { animation: auroraB 16s ease-in-out infinite; }
body[data-bg-anim="aurora"] .mesh-bg svg rect:nth-of-type(4) { animation: auroraC 20s ease-in-out infinite; }
body[data-bg-anim="aurora"] .mesh-bg svg rect:nth-of-type(5) { animation: auroraD 17s ease-in-out infinite; }
body[data-bg-anim="aurora"] .mesh-bg svg rect:nth-of-type(6) { animation: auroraE 24s ease-in-out infinite; }

@keyframes auroraSweep {
  0%   { filter: blur(70px) saturate(1.3) hue-rotate(0deg); }
  100% { filter: blur(70px) saturate(1.3) hue-rotate(360deg); }
}
@keyframes auroraA { 0%,100% { transform: translate3d(-30%,0,0) scale(1.1); } 50% { transform: translate3d(30%,5%,0) scale(1.3); } }
@keyframes auroraB { 0%,100% { transform: translate3d(20%,10%,0) scale(0.9); } 50% { transform: translate3d(-25%,-5%,0) scale(1.2); } }
@keyframes auroraC { 0%,100% { transform: translate3d(-15%,15%,0) scale(1.2); } 50% { transform: translate3d(25%,-10%,0) scale(0.95); } }
@keyframes auroraD { 0%,100% { transform: translate3d(25%,-15%,0) scale(1); } 50% { transform: translate3d(-20%,15%,0) scale(1.25); } }
@keyframes auroraE { 0%,100% { transform: translate3d(0,20%,0) scale(0.85); } 50% { transform: translate3d(0,-15%,0) scale(1.15); } }

/* ========== Pattern: pulse — rhythmic, very visible breath ========== */
body[data-bg-anim="pulse"] .mesh-bg { animation: pulseBreath 6s ease-in-out infinite; }
body[data-bg-anim="pulse"] .mesh-bg svg rect:nth-of-type(2) { animation: pulseGrowA 5s ease-in-out infinite; }
body[data-bg-anim="pulse"] .mesh-bg svg rect:nth-of-type(3) { animation: pulseGrowB 5s ease-in-out infinite; animation-delay: -1.2s; }
body[data-bg-anim="pulse"] .mesh-bg svg rect:nth-of-type(4) { animation: pulseGrowA 5s ease-in-out infinite; animation-delay: -2.4s; }
body[data-bg-anim="pulse"] .mesh-bg svg rect:nth-of-type(5) { animation: pulseGrowB 5s ease-in-out infinite; animation-delay: -3.6s; }
body[data-bg-anim="pulse"] .mesh-bg svg rect:nth-of-type(6) { animation: pulseGrowA 5s ease-in-out infinite; animation-delay: -4.8s; }

@keyframes pulseBreath {
  0%,100% { filter: blur(50px) saturate(1.0); transform: scale(1); }
  50%     { filter: blur(40px) saturate(1.4); transform: scale(1.06); }
}
@keyframes pulseGrowA {
  0%,100% { transform: scale(0.8) translate3d(0,0,0); }
  50%     { transform: scale(1.4) translate3d(8%,-5%,0); }
}
@keyframes pulseGrowB {
  0%,100% { transform: scale(1.4) translate3d(-6%,4%,0); }
  50%     { transform: scale(0.85) translate3d(0,0,0); }
}

/* ========== Pattern: cursor — parallax follows the mouse ========== */
body[data-bg-anim="cursor"] .mesh-bg {
  transition: filter 400ms ease;
  filter: blur(48px) saturate(1.15);
}
body[data-bg-anim="cursor"] .mesh-bg svg rect {
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
body[data-bg-anim="cursor"] .mesh-bg svg rect:nth-of-type(2) { transform: translate3d(calc(var(--mx) *  1.4), calc(var(--my) *  1.4), 0) scale(1.05); }
body[data-bg-anim="cursor"] .mesh-bg svg rect:nth-of-type(3) { transform: translate3d(calc(var(--mx) * -1.8), calc(var(--my) * -0.8), 0) scale(1.08); }
body[data-bg-anim="cursor"] .mesh-bg svg rect:nth-of-type(4) { transform: translate3d(calc(var(--mx) *  0.9), calc(var(--my) * -1.6), 0) scale(1.1);  }
body[data-bg-anim="cursor"] .mesh-bg svg rect:nth-of-type(5) { transform: translate3d(calc(var(--mx) * -1.1), calc(var(--my) *  1.3), 0) scale(1.04); }
body[data-bg-anim="cursor"] .mesh-bg svg rect:nth-of-type(6) { transform: translate3d(calc(var(--mx) *  2.2), calc(var(--my) * -0.5), 0) scale(1.12); }

/* ========== Pattern: off — no animation ========== */
body[data-bg-anim="off"] .mesh-bg,
body[data-bg-anim="off"] .mesh-bg svg rect { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mesh-bg,
  .mesh-bg svg rect { animation: none !important; }
}

/* === Reveal animation === */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* === Stat block === */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -1.4px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-num .unit { font-size: 22px; color: var(--ink-mute); margin-left: 2px; }
.stat-label { font-size: 13px; color: var(--ink-mute); letter-spacing: 0.02em; }

/* === Marquee logos === */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.logo-row .logo-chip {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
}

/* tabular-figure helpers */
.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* === Legal documents (privacy / terms) — shared layout ===
   Layout shared by long-form normative document pages such as the privacy policy and terms.
   The hero follows the sub-page type B (JP lead / EN eyebrow). */
.legal-hero {
  padding: var(--section-pad) 0 var(--section-pad-tight);
  border-bottom: 1px solid var(--hairline);
}
.legal-hero h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 600;
  letter-spacing: -1.0px;
  line-height: 1.2;
  margin: 0 0 var(--gap-head-lede);
  max-width: 16ch;
}
.legal-hero h1 em { font-weight: 800; }
.legal-hero h1 .en {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.36em;
  color: var(--primary);
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: var(--gap-eyebrow);
}
.legal-hero .lead {
  font-size: 17px;
  color: var(--ink-secondary);
  max-width: 620px;
  margin: 0;
  line-height: var(--lh-prose);
}
.legal-hero .legal-dates {
  margin: 28px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
@media (max-width: 768px) { .legal-hero { padding: var(--section-pad-mobile) 0 var(--section-pad-mobile-tight); } }
@media (max-width: 480px) { .legal-hero { padding: 48px 0 32px; } }

.legal-body { padding: var(--section-pad-tight) 0 var(--section-pad); }
/* Align the left edge of the title (hero) and the body to the same column. Constrain both
   containers to the body column width (760) + horizontal padding and drop the article's re-centering.
   This makes the hero h1 and the body's left edge match */
.legal-hero .container,
.legal-body .container { max-width: calc(760px + var(--container-pad) * 2); }
.legal-article { max-width: none; margin: 0; }
.legal-intro { font-size: 16px; line-height: var(--lh-prose); color: var(--ink-secondary); margin: 0 0 40px; }

/* Clauses. Each clause's <section> inherits the global section{padding:96px 0}, adding huge
   top/bottom whitespace, so cancel padding to 0 and control spacing between clauses with
   margin(--gap-head-body=32px) only (twice the 16px between paragraphs within a clause, for rhythm) */
.legal-article section { margin: 0 0 var(--gap-head-body); padding: 0; }
.legal-article h2.legal-clause {
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.35;
  margin: 0 0 var(--gap-head-lede);
}
.legal-article p { font-size: 16px; line-height: var(--lh-prose); color: var(--ink-secondary); margin: 0 0 16px; }
.legal-article ul, .legal-article ol { margin: 0 0 16px; padding-left: 1.4em; }
.legal-article li { font-size: 16px; line-height: var(--lh-prose); color: var(--ink-secondary); margin: 0 0 8px; }
.legal-article ul ul { margin: 8px 0 4px; }
.legal-article a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* contact point */
.legal-contact {
  margin: 8px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 24px;
}
.legal-contact dt { font-size: 13px; color: var(--ink-mute); font-weight: 500; }
.legal-contact dd { margin: 0; font-size: 16px; color: var(--ink-secondary); line-height: var(--lh-body); }
.legal-contact dd a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  .legal-contact { grid-template-columns: 1fr; gap: 2px; }
  .legal-contact dd { margin: 0 0 12px; }
}