/* =========================================================================
   zen.css — Astrapia "Zen precision" theme (Japanese technology rebrand)
   -------------------------------------------------------------------------
   Loaded AFTER style.css. Re-declares design tokens + refines a few
   components only — no page structure, heading, link or schema changes, so
   rankings are fully preserved.

   Aesthetic: Japanese Zen precision in the brand's own INDIGO/BLUE (藍) — a
   calm paper canvas, deep ink-navy text, one restrained blue accent (kept to
   match the logo), generous negative space (間), hairline rules, precise type
   (Zen Old Mincho headings + Zen Kaku Gothic body).
   ========================================================================= */

:root {
    /* ---- Canvas: soft paper instead of clinical white ---- */
    --bg:      #F8F8F5;
    --bg-soft: #EEF1F5;
    --bg-tint: #EAF0F8;
    --white:   #ffffff;

    /* ---- Ink (墨), with a navy undertone to sit with the blue ---- */
    --ink:     #111A26;
    --ink-2:   #33414F;
    --muted:   #6E7A88;
    --line:    #E2E6EC;
    --line-2:  #EEF1F5;

    /* ---- Accent = the brand BLUE / Japanese indigo (藍). Kept close to the
           logo so nothing clashes; the ramp just gets a touch deeper/premium. */
    --blue-900: #06213f;
    --blue-800: #083a6e;
    --blue-700: #0a4d8f;   /* links / active nav */
    --blue-600: #0e5fb0;   /* PRIMARY — matches the logo */
    --blue-500: #1c74d4;
    --blue-300: #93bdee;   /* soft accent line/border */
    --blue-100: #e3edfa;   /* faint blue tint */
    --blue-50:  #f2f7fd;

    /* ---- Precision: crisp corners, quieter shadows ---- */
    --r-sm: 3px;
    --r:    6px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-pill: 999px;
    --sh-xs: 0 1px 2px rgba(17,26,38,.05);
    --sh-sm: 0 4px 16px rgba(17,26,38,.06);
    --sh:    0 16px 44px rgba(17,26,38,.09);
    --sh-lg: 0 32px 74px rgba(17,26,38,.13);
    --sh-blue: 0 12px 28px rgba(14,95,176,.20);

    /* ---- Type: Japanese-designed families ---- */
    --font-display: "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
    --font-body:    "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
    --font-mincho:  "Zen Old Mincho", "Times New Roman", serif;

    --header-h: 88px;
}

/* Big editorial headings in mincho serif — the signature Japanese touch. */
.hero-copy h1,
.section-head h2,
.split-copy h2 {
    font-family: var(--font-mincho);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.16;
}

body { background: var(--bg); color: var(--ink); letter-spacing: .002em; }
::selection { background: rgba(14,95,176,.16); color: var(--ink); }

/* Fine indigo signature line across the very top of every page. */
.site-header { border-top: 3px solid var(--blue-600); background: rgba(248,248,245,.86); backdrop-filter: saturate(1.15) blur(10px); }
.site-header.scrolled { background: rgba(248,248,245,.94); box-shadow: 0 1px 0 var(--line), var(--sh-sm); }

/* Eyebrow → a small filled indigo square (Japanese label mark). */
.eyebrow { color: var(--blue-700); letter-spacing: .2em; }
.eyebrow::before {
    content: ""; display: inline-block; width: 9px; height: 9px;
    background: var(--blue-600); border-radius: 0; margin-right: 10px;
    transform: translateY(-1px);
}

/* Hero: calmer frame, more negative space, indigo accents. */
.hero { background: linear-gradient(180deg, var(--bg), var(--bg-soft)); }
.hero-badge { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); letter-spacing: .04em; }
.hero-badge b { color: var(--blue-700); }
.hero-badge .dot { background: var(--blue-600); box-shadow: 0 0 0 4px rgba(14,95,176,.14); }
.hero-copy h1 .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--blue-700); }
.hero-media .frame { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh); }
.hero-media .accent-line { background: var(--blue-600); }
.hero-trust .stat .n { font-family: var(--font-mincho); }

/* Buttons: precise, quiet motion. */
.btn { border-radius: var(--r); font-weight: 700; letter-spacing: .01em; }
.btn-primary { background: var(--blue-600); box-shadow: var(--sh-blue); }
.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: 0 16px 30px rgba(14,95,176,.26); }
.btn-ghost, .btn-white { border-radius: var(--r); }
.btn-ghost:hover { border-color: var(--blue-300); color: var(--blue-700); }

/* Cards & frames → hairline precision, restrained hover. */
.feature-card, .split-media .frame, .card { border-radius: var(--r-lg); border: 1px solid var(--line); }
.feature-card:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: var(--sh); }
.feature-ic { color: var(--blue-600); }

/* Nav underline in indigo. */
.nav-link.is-active, .mobile-nav a.is-active, .mobile-nav a:hover { color: var(--blue-700); }
.nav-link::after { background: var(--blue-600); }

/* Section rhythm: more breathing room. */
.section { padding-block: clamp(76px, 10vw, 140px); }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }

/* Focus states. */
a:focus-visible, .btn:focus-visible, button:focus-visible {
    outline: 2px solid var(--blue-600); outline-offset: 3px;
}

/* Footer: quiet ground with an indigo hairline. */
.site-footer, footer { border-top: 3px solid var(--blue-600); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover, .feature-card:hover { transform: none; }
}