/* 8M Holdings Ltd. — 8mholdings.ca */

@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}

:root {
  --bg: #fafafa;
  --ink: #141519;
  --body-ink: #43474f;
  --muted: #6b7078;
  --faint: #9aa0a9;
  --line: #e8e8ea;
  --chip: #ffffff;
  --accent: #0966f1;
  --glow-alpha: 8%;
  --font: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0d0f;
    --ink: #f2f3f5;
    --body-ink: #b9bec7;
    --muted: #969ca6;
    --faint: #686d77;
    --line: #1e2126;
    --chip: #121418;
    --accent: #4080ff;
    --glow-alpha: 12%;
  }
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(9, 102, 241, 0.18); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* cursor glow */
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 38%),
    color-mix(in srgb, var(--accent) var(--glow-alpha), transparent), transparent 70%);
}

.site-head, main, .site-foot { position: relative; z-index: 1; }

/* header */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4.5vw, 44px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 19px; }
.brand span { font-size: 14px; font-weight: 560; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 24px; }
.site-nav a { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color 0.18s ease; }
.site-nav a:hover { color: var(--ink); }

/* the mark */
.mark { display: block; width: 100%; height: auto; }
.mark rect { fill: var(--accent); }
.mark .spin {
  transform-box: view-box;
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.3, 1.06, 0.22, 1);
  will-change: transform;
}

/* hero */
.hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 24px 72px;
}
.mark-wrap { width: clamp(140px, 22vw, 180px); margin-bottom: 44px; }
.js .mark-wrap { opacity: 0; transform: scale(0.82) rotate(-70deg); }
.js.loaded .mark-wrap {
  opacity: 1; transform: none;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease-out;
}
.mark-tilt { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(27px, 3.6vw, 33px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.tagline {
  margin: 0 auto 46px;
  max-width: 46ch;
  font-size: 16px;
  color: var(--muted);
}

/* email chip */
.email-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  background: var(--chip);
  border-radius: 999px;
  padding: 4px 5px 4px 18px;
  transition: border-color 0.2s ease;
}
.email-chip:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.email-addr {
  font-family: var(--mono); font-size: 13.5px;
  text-decoration: none; color: var(--ink);
  margin-right: 14px;
}
.email-addr:hover { color: var(--accent); }
.btn-copy {
  font: 500 12px/1 var(--font);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.btn-copy:hover { color: var(--ink); border-color: var(--faint); }
.btn-copy.done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.statement-note { margin: 20px 0 0; font-size: 13.5px; color: var(--faint); }
.statement-note a {
  color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
  transition: color 0.18s ease;
}
.statement-note a:hover { color: var(--accent); }

/* footer */
.site-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 4.5vw, 44px) 24px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--faint);
}
.site-foot p { margin: 0; }
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--muted); text-decoration: none; transition: color 0.18s ease; }
.site-foot a:hover { color: var(--ink); }

/* document pages */
.doc { flex: 1; width: 100%; max-width: 664px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) 24px 96px; }
.doc h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.updated { margin: 0 0 44px; font-size: 13px; color: var(--faint); }
.doc h2 { margin: 40px 0 10px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.doc p, .doc li { font-size: 15px; line-height: 1.7; color: var(--body-ink); margin: 0 0 12px; }
.doc ul { padding-left: 20px; margin: 0 0 12px; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc .lede { font-size: 16px; }

/* contact grid (support page) */
.contacts {
  border: 1px solid var(--line);
  background: var(--chip);
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0 8px;
}
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px;
}
.contact-row + .contact-row { border-top: 1px solid var(--line); }
.contact-row .addr {
  font-family: var(--mono); font-size: 13.5px; color: var(--ink);
  text-decoration: none; display: block;
}
.contact-row .addr:hover { color: var(--accent); }
.contact-row .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 560px) {
  .site-foot { flex-direction: column; justify-content: center; text-align: center; }
  .contact-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mark-wrap { opacity: 1; transform: none; transition: none; }
  .mark .spin, .mark-tilt { transition: none; }
  .glow { display: none; }
}