/* Shared styles for the Micavo hub pages: Home, Apps, Media, About. */
:root { --ink:#151515; --muted:#68645d; --line:#d8d3c9; --paper:#f3f0e8; --panel:#fff; --accent:#f5b800; --accent-soft:#f4e6ac; --green:#157347; --shadow:0 18px 55px rgba(30,28,24,.08); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","Noto Sans TC","Noto Sans JP",sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
html[data-lang="en"] .zh, html[data-lang="en"] .ja { display:none !important; }
html[data-lang="zh"] .en, html[data-lang="zh"] .ja { display:none !important; }
html[data-lang="ja"] .en, html[data-lang="ja"] .zh { display:none !important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:6px; z-index:50; }
.skip:focus { left:8px; }

.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(21,21,21,.1); background:rgba(243,240,232,.92); backdrop-filter:blur(14px); }
.nav { max-width:1120px; margin:0 auto; padding:0 24px; min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:10px; font-weight:900; font-size:26px; letter-spacing:-.04em; text-decoration:none; }
.logo-mark { width:42px; height:42px; border-radius:5px; background:var(--accent); display:grid; place-items:center; font-size:22px; }
.nav-right { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.nav-links { display:flex; gap:22px; font-weight:700; color:#4d4a45; }
.nav-links a { text-decoration:none; padding:8px 0; }
.nav-links a:hover, .nav-links a.current { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; text-underline-offset:6px; }
.lang-switch { display:flex; border:1px solid rgba(21,21,21,.14); border-radius:7px; background:rgba(255,255,255,.54); padding:3px; }
.lang-switch button { border:0; background:transparent; font:inherit; font-weight:700; font-size:14px; padding:7px 12px; border-radius:4px; cursor:pointer; color:#4d4a45; }
.lang-switch button.active { background:var(--ink); color:#fff; }

main { max-width:1120px; margin:0 auto; padding:0 24px; }
section { padding:64px 0 8px; }
.eyebrow { margin:0 0 14px; color:#8a5a00; font-weight:800; letter-spacing:.12em; font-size:13px; text-transform:uppercase; }
h1 { margin:0 0 20px; font-size:clamp(40px,6.4vw,76px); font-weight:900; line-height:1; letter-spacing:-.05em; text-wrap:balance; }
h1 .mark { background:linear-gradient(transparent 62%, var(--accent) 62%); }
h2 { margin:0 0 10px; font-size:clamp(28px,4vw,42px); line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
h3 { letter-spacing:-.02em; }
.lead { margin:0 0 28px; font-size:clamp(18px,2.2vw,22px); color:#5f5b54; max-width:700px; }
.sub { margin:0 0 28px; color:var(--muted); max-width:44em; font-size:18px; }
.hero { padding:84px 0 40px; max-width:900px; }
.page-hero { padding:72px 0 16px; max-width:860px; }
.page-hero h1 { font-size:clamp(36px,5.4vw,62px); }

.cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:7px; border:1px solid var(--ink); font:inherit; font-weight:800; font-size:16px; text-decoration:none; cursor:pointer; background:transparent; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; }
.button.primary { background:var(--ink); color:#fff; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(21,21,21,.12); }
.textlink { font-weight:800; color:var(--ink); text-underline-offset:5px; text-decoration-color:var(--accent); text-decoration-thickness:3px; }
.textlink:hover { text-decoration-color:var(--ink); }
.hero .textlink { display:inline-block; margin-top:22px; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none; }
.card h3 { margin:10px 0 6px; font-size:22px; }
.card p { margin:0 0 18px; color:#5f5b54; }
.card .go { margin-top:auto; font-weight:800; }
.card .go::after { content:" →"; }
a.card { transition:transform .15s ease, border-color .15s ease; }
a.card:hover { transform:translateY(-3px); border-color:var(--ink); }
.card .ico { font-size:28px; }

.badge { display:inline-flex; width:fit-content; align-items:center; padding:4px 11px; border-radius:999px; background:var(--accent-soft); font-size:12.5px; font-weight:800; letter-spacing:.02em; }
.badge.live { background:#e1f0e7; color:var(--green); }
.badge.soon { background:var(--accent-soft); color:#7a5300; }
.badge.web { background:#e7e5f5; color:#42379a; }

.feat { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat .card { padding:0; overflow:hidden; }
.feat .shot { aspect-ratio:4/3; background:#e6e1d5; overflow:hidden; }
.feat .shot img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.feat .body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.feat h3 { margin:12px 0 4px; font-size:24px; }
.feat .tag { margin:0 0 6px; font-weight:800; }
.feat .body p:not(.tag) { margin:0 0 18px; color:#5f5b54; }

.band { margin-top:64px; padding:clamp(28px,5vw,52px); background:var(--ink); color:#fff; border-radius:20px; display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; }
.band h2 { color:#fff; }
.band p { margin:0 0 14px; color:#cfcbc2; max-width:40em; }
.band .eyebrow { color:var(--accent); }
.band .button { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.band .button.ghost { background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.band.light { background:var(--panel); color:var(--ink); border:2px solid var(--ink); box-shadow:12px 12px 0 var(--accent); }
.band.light h2 { color:var(--ink); } .band.light p { color:#4d4a45; } .band.light .eyebrow { color:#8a5a00; }
.band.light .button { background:var(--ink); border-color:var(--ink); color:#fff; }
.band .cta { justify-content:flex-start; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 20px; padding:0; list-style:none; }
.pills li { padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.12); font-size:14px; font-weight:700; }
.band.light .pills li { background:var(--accent-soft); }

.about { display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,4vw,38px); box-shadow:var(--shadow); }
.about img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:14px; background:#e6e1d5; }
.about h3 { margin:0 0 4px; font-size:26px; }
.about .role { margin:0 0 16px; color:var(--muted); font-weight:700; }
.about p { margin:0 0 14px; color:#4d4a45; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; padding:0; list-style:none; }
.chips li { padding:6px 12px; border-radius:999px; background:var(--accent-soft); font-size:13.5px; font-weight:700; }

.plist { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.plist a { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; text-decoration:none; transition:transform .15s ease; display:flex; flex-direction:column; gap:2px; }
.plist a:hover { transform:translateY(-3px); border-color:var(--ink); }
.plist b { font-size:18px; }
.plist small { color:var(--muted); margin-bottom:8px; }
.plist .badge { margin-top:auto; }

.dir { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dir .card { padding:0; overflow:hidden; flex-direction:row; }
.dir .shot { width:38%; flex:none; background:#e6e1d5; }
.dir .shot img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.dir .body { padding:22px; display:flex; flex-direction:column; gap:2px; }
.dir h3 { margin:10px 0 4px; font-size:23px; }
.dir .tag { margin:0 0 4px; font-weight:800; }
.dir .body p:not(.tag) { margin:0 0 14px; color:#5f5b54; }
.dir .actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.dir .actions .appstore img { height:40px; width:auto; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.note { margin-top:22px; color:var(--muted); font-size:14px; max-width:46em; }

.footer { max-width:1120px; margin:72px auto 0; padding:26px 24px 40px; border-top:1px solid rgba(21,21,21,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.footer nav { display:flex; gap:6px 18px; flex-wrap:wrap; }
.footer a { text-decoration:none; padding:4px 0; } .footer a:hover { color:var(--ink); text-decoration:underline; }
.footer .lang-switch { align-self:flex-start; }

@media (max-width: 860px) {
  .cards, .feat, .steps, .band, .dir { grid-template-columns:1fr; }
  .plist { grid-template-columns:repeat(2,1fr); }
  .about { grid-template-columns:1fr; } .about img { max-width:240px; aspect-ratio:1/1; }
  .hero { padding-top:48px; } .page-hero { padding-top:44px; }
  .dir .card { flex-direction:column; } .dir .shot { width:100%; aspect-ratio:16/9; }
}
@media (max-width: 700px) {
  main, .nav, .footer { padding-left:16px; padding-right:16px; }
  .nav { min-height:0; padding-top:10px; padding-bottom:6px; row-gap:2px; }
  .logo { font-size:22px; } .logo-mark { width:34px; height:34px; font-size:18px; }
  .nav-right { display:contents; }
  .lang-switch button { padding:7px 9px; font-size:13px; }
  .nav-links { order:3; width:100%; justify-content:space-between; gap:8px; font-size:15px; padding-bottom:4px; }
  .nav-links a { min-height:44px; display:inline-flex; align-items:center; }
  .cta .button { width:100%; }
  .band { box-shadow:none; }
  .band.light { box-shadow:7px 7px 0 var(--accent); }
}
@media (max-width: 380px) { .plist { grid-template-columns:1fr; } .nav-links { font-size:14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .button, a.card, .plist a { transition:none; } }
.badge.plat { background:#ebe8de; color:#4d4a45; }
.actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.meta { display:flex; flex-wrap:wrap; gap:6px; }
.band { margin-top:0; }
.feats { margin:0 0 16px; padding:0; list-style:none; display:grid; gap:6px; font-size:15px; color:#3d3a35; }
.feats li { padding-left:20px; position:relative; }
.feats li::before { content:""; position:absolute; left:0; top:.65em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.pills.dark li { background:var(--ink); color:#fff; }