@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color-scheme: dark; --bg: #10191c; --surface: rgba(27, 43, 45, .78); --surface-hover: #233638; --text: #f7f3e8; --muted: #b2beb7; --gold: #d2a84b; --gold-bright: #f0ca6d; --emerald: #52b69a; --border: rgba(210, 168, 75, .24); --shadow: 0 24px 70px rgba(0,0,0,.28); }
:root.light { color-scheme: light; --bg: #f4f0e5; --surface: rgba(255,255,255,.74); --surface-hover: #fffdf7; --text: #152226; --muted: #65726d; --gold: #a47720; --gold-bright: #bb8b2b; --emerald: #237d68; --border: rgba(164,119,32,.26); --shadow: 0 24px 70px rgba(63,55,35,.12); }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; background: radial-gradient(circle at 50% -10%, rgba(82,182,154,.12), transparent 37rem), var(--bg); transition: color .35s ease, background .35s ease; }
button, a { font: inherit; }
a { color: inherit; }
.ambient { position: fixed; width: 22rem; height: 22rem; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .12; }
.ambient-one { top: 8%; left: -9rem; background: var(--gold); }
.ambient-two { right: -10rem; bottom: 5%; background: var(--emerald); }
.page-shell { width: min(100% - 2rem, 620px); margin: 0 auto; padding: 3.5rem 0 2rem; position: relative; }
.profile { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.brand-mark { width: 76px; height: 76px; border-radius: 25px; padding: 10px; background: var(--gold); box-shadow: 0 10px 30px rgba(210,168,75,.2); transform: rotate(-4deg); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 17px; mix-blend-mode: multiply; }
:root.light .brand-mark img { mix-blend-mode: normal; }
.eyebrow { margin: 0 0 .25rem; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 700; }
h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.65rem, 5vw, 2.1rem); letter-spacing: -.04em; }
.intro { color: var(--muted); margin: .35rem 0 0; font-size: .91rem; line-height: 1.45; }
.theme-toggle { align-self: start; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); padding: .53rem .7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: .25s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--gold); transform: translateY(-2px); }
.theme-label { display: none; font-size: .72rem; }
.links { display: grid; gap: .75rem; }
.link-card { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: .85rem; min-height: 78px; padding: .85rem 1rem .85rem .85rem; text-decoration: none; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,.08); backdrop-filter: blur(14px); transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.link-card:hover, .link-card:focus-visible { background: var(--surface-hover); border-color: var(--gold); transform: translateY(-4px) scale(1.008); box-shadow: var(--shadow); outline: none; }
.link-primary { border-color: rgba(210,168,75,.6); }
.link-featured .link-icon { color: var(--emerald); border-color: rgba(82,182,154,.35); }
.link-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--gold-bright); border: 1px solid var(--border); font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; }
.icon-studio { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: #152226; font-weight: 700; border: 0; }
.link-text { min-width: 0; display: grid; gap: .18rem; }
.link-text strong { font-family: 'Space Grotesk', sans-serif; font-size: .98rem; letter-spacing: -.01em; }
.link-text small { color: var(--muted); font-size: .78rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow { color: var(--muted); font-size: 1.2rem; transition: transform .25s ease, color .25s ease; }
.link-card:hover .arrow { color: var(--gold-bright); transform: translate(2px, -2px); }
.footer { display: flex; justify-content: center; gap: .55rem; margin-top: 2rem; color: var(--muted); font-size: .7rem; }
.footer-dot { color: var(--gold); }
.reveal { opacity: 0; transform: translateY(12px); animation: rise .65s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: var(--delay, 0ms); }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 560px) { .theme-label { display: inline; } }
@media (max-width: 430px) { .page-shell { width: min(100% - 1.25rem, 620px); padding-top: 2rem; } .profile { grid-template-columns: 62px 1fr auto; gap: .75rem; } .brand-mark { width: 62px; height: 62px; border-radius: 20px; padding: 8px; } .brand-mark img { border-radius: 14px; } .intro { font-size: .82rem; } .theme-toggle { padding: .5rem .58rem; } .link-card { min-height: 72px; grid-template-columns: 40px 1fr 20px; padding: .75rem .8rem .75rem .7rem; gap: .7rem; border-radius: 16px; } .link-icon { width: 40px; height: 40px; border-radius: 12px; } .link-text small { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }