:root {
  --bg: #0b0c0f; --fg: #e6e6e6; --muted: #a0a0a0;
  --accent: #3aa8ff; --accent-dark: #0b6fc0;
  --card: #12141a; --maxw: 64rem; --pad: 1.6rem; --radius: 14px;
}

html[data-theme="light"] { --bg: #ffffff; --fg: #0b0c0f; --muted: #5a5a5a; --card: #f6f7f9; }
html[data-theme="dark"]  { --bg: #0b0c0f; --fg: #e6e6e6; --muted: #a0a0a0; --card: #12141a; }

* { box-sizing: border-box; }
html { font-size: 16px; }
@media (max-width: 380px) { html { font-size: 15px; } }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--fg); background: radial-gradient(1200px 800px at 10% -10%, rgba(58,168,255,0.08), transparent 40%), radial-gradient(1000px 700px at 110% 10%, rgba(11,111,192,0.06), transparent 45%), var(--bg); line-height: 1.6; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--pad); }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: 0.2px; position: relative; }
.brand .mark { width: 18px; height: 18px; transform: rotate(-18deg); }

.nav-links { display: flex; gap: 0.8rem; align-items: center; font-size: 0.95rem; color: var(--muted); }
.nav-links a { padding: 0.4rem 0.6rem; border-radius: 8px; }
.nav-links a:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Theme toggle - clean round icon */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.18); background: transparent; color: var(--fg); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
html[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.16); }
.theme-toggle:hover { background: rgba(0,0,0,0.06); }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.06); }
.theme-toggle svg { width: 18px; height: 18px; display:block; }

.hero { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 8vh var(--pad); }

.title { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; position: relative; display: inline-block; }
.shard-above { position: relative; display: inline-block; padding-top: 1.6rem; }
.shard-above .hero-mark { position: absolute; left: -0.6rem; top: 0; width: 44px; height: 44px; transform: rotate(-18deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }

.subtitle { margin-top: 1.2rem; color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.25rem); }

.footer { padding: 1.6rem var(--pad); color: var(--muted); border-top: 1px solid rgba(255,255,255,0.06); }
.card { background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: 1.2rem; }

.contact-wrap { display: grid; gap: 1rem; margin: 6vh auto; max-width: 40rem; }
.contact-item b { color: var(--fg); }

.fade-in { opacity: 0; transform: translateY(8px); animation: fadeIn 700ms ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; opacity: 1; transform: none; } }