:root {
	/* Cozy color system */
	--bg: #221F26;           /* background */
	--fg: #F6F6F7;           /* foreground */
	--muted: #A1A1AA;        /* muted.foreground */
	--muted-bg: #2A2730;     /* muted.DEFAULT */
	--border: #3A3741;       /* derived border tone for dark */
	--surface: #2A2730;      /* surface blocks */
	--primary: #F97316;      /* accent/primary */
	--primary-contrast: #1F2937; /* not used much on dark */
	--header-h: 64px;        /* used for layout offset */
}
html,body { margin:0; padding:0; color:var(--fg); background:var(--bg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; }
body { padding-top: var(--header-h); }
.container { max-width: 87.5rem; /* 1400px */ margin: 2rem auto; padding: 0 1rem; }
.site-header, .site-footer { border-bottom:1px solid var(--border); padding: .75rem 1rem; }
.site-footer { border-top:1px solid var(--border); border-bottom:0; margin-top:2rem; color:var(--muted); background: var(--muted-bg); }
.footer-inner { max-width:68rem; margin:0 auto; padding:1rem; text-align:center; font-size:.9rem; }
.footer-inner a { color: var(--primary); text-decoration:none; transition: color .2s ease; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner .version { font-size:.8rem; margin:.25rem 0; }
.footer-inner .privacy { font-size:.8rem; }
.site-header { position:fixed; left:0; right:0; top:0; z-index:50; background:transparent; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; backdrop-filter:none; }
.site-header.scrolled { background: rgba(34,31,38,.95); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0,0,0,.25); border-bottom-color: #4A4652; }
.header-inner { display:flex; align-items:center; justify-content:space-between; max-width:68rem; margin:0 auto; gap:1rem; }
.site-header .header-inner { min-height: var(--header-h); }
.brand { font-weight:700; margin-right:1rem; color:inherit; text-decoration:none; }
.brand-logo { width:28px; height:28px; vertical-align:middle; margin-right:.5rem; }
.primary-nav a { margin-right:.75rem; color:var(--fg); text-decoration:none; transition: color .2s ease; }
.primary-nav a:last-child { margin-right:0; }
.primary-nav a:hover { color: var(--primary); }
.primary-nav a.active { color: var(--primary); font-weight:600; }
.header-actions { display:flex; align-items:center; gap:.75rem; }
.social-links { display:flex; align-items:center; gap:.5rem; }
.icon-link { color:var(--fg); opacity:.85; transition: color .2s ease, opacity .2s ease; }
.icon-link:hover { opacity:1; color: var(--primary); }
.menu-toggle { display:none; background:none; border:1px solid #ddd; border-radius:.375rem; padding:.25rem .5rem; cursor:pointer; }
.mobile-nav { display:none; border-top:1px solid var(--border); padding:.5rem 1rem; background: rgba(34,31,38,.98); }
.mobile-nav a { display:block; padding:.5rem 0; color:var(--fg); text-decoration:none; transition: color .2s ease; }
.mobile-nav a:hover { text-decoration:underline; }

@media (max-width: 640px) {
	.primary-nav { display:none; }
	.menu-toggle { display:inline-block; }
	.mobile-nav { display:block; }
	.mobile-nav[hidden] { display:none; }
}

/* Hero */
.hero { text-align:center; padding: 5rem 1rem 3rem; }
.hero { position: relative; min-height: calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding: 2rem 1rem; max-width: 68rem; margin: 0 auto; }
.hero::before { content:""; position:absolute; inset:0; background: url('/lovable-uploads/c0ef808b-e0b3-49ab-a546-d8ef255fe8bc.png') center/contain no-repeat; opacity:.08; pointer-events:none; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; }
.hero .accent { color: var(--primary); }
.hero .lead { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--muted); max-width: 42rem; margin: 0 auto 1.5rem; }
.hero .cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:.6rem 1rem; border-radius:.5rem; text-decoration:none; }
.btn-primary { background: var(--primary); color: var(--fg); }
.btn-primary:hover { filter: brightness(.95); }
.btn-outline { border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(249, 115, 22, .12); }

/* Projects */
.project-list { list-style:none; padding:0; margin:1rem 0; display:grid; gap:1rem; grid-template-columns: 1fr; }
.project-list { max-width: 68rem; margin-left:auto; margin-right:auto; }
@media (min-width: 900px) {
	.project-list { grid-template-columns: repeat(2, 1fr); }
}
.project-card { padding:1rem; border:1px solid var(--border); border-radius:.75rem; background:var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); border-color:#4A4652; }
.project-list h2 { margin:.25rem 0; font-size:1.25rem; }
.project-list h3 { margin:.25rem 0; font-size:1.125rem; }
.project-list a { color: var(--fg); }
.project-list a:hover { color: var(--primary); }
.project-list .tags { color:var(--muted); font-size:.9rem; }

/* Stripe buy buttons wrapper: one column, centered */
.buy-buttons { display:flex; flex-direction:column; align-items:center; gap:1rem; margin:1rem 0; }
.buy-buttons stripe-buy-button { width:100%; max-width:420px; }

/* Headings spacing */
h1 { margin: 0 0 .5rem; line-height:1.25; }
h2 { margin: 1.5rem 0 .5rem; line-height:1.3; }
p { margin: 0 0 .75rem; }

/* Global links and focus styles */
a { color: var(--primary); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Selection color */
::selection { background: rgba(249, 115, 22, .3); color: var(--fg); }

/* Animations (cozy-style) */
@keyframes fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-slow { 0% { opacity: 0; } 100% { opacity: 1; } }
.animate-fade-in { animation: fade-in .5s ease-out both; }
.animate-fade-in-slow { animation: fade-in-slow .8s ease-out both; }