:root{
	--bg:#fff;
	--fg:#111;
	--muted:#666;
	--accent:#d19;
	--container-max:1100px;
	--radius:12px; /* base radius for rounded look */
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color:var(--fg);
	background:var(--bg);
	line-height:1.5;
}
.skip-link{position:absolute;left:1rem;top:0;transform:translateY(-120%);background:#111;color:#fff;padding:.5rem .75rem;border-radius:6px;z-index:999}
.skip-link:focus{transform:none;outline:3px solid rgba(181,101,232,.25);}
.wrap{max-width:var(--container-max);margin:0 auto;padding:2rem}
header{background:linear-gradient(90deg,var(--accent),#a2a);color:#fff;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header h1{order:0}
header nav{order:1;margin-left:auto}
header h1{margin:0;font-size:1.25rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
nav a{color:inherit;text-decoration:none;padding:.5rem .5rem;border-radius:6px}
nav a:focus,nav a:hover{background:rgba(255,255,255,.08);outline:none}
.hero{padding:4rem 0;color:#fff;text-align:center}
.hero .btn{background:#fff;color:var(--accent);padding:.6rem 1rem;border-radius:calc(var(--radius) - 2px);text-decoration:none;font-weight:600}
:root{
	/* Dark purple theme */
	--bg:#0b0710; /* deep almost-black purple */
	--bg-2:#12081a; /* slightly lighter section background */
	--fg:#e9e6f1; /* near-white for text */
	--muted:#c9c0dd; /* muted light purple */
	--accent:#b565e8; /* primary purple accent */
	--accent-2:#7b3fe4; /* secondary accent */
	--card:#12101a; /* card background */
	--container-max:1100px;
	--radius:12px;
}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:calc(var(--radius) - 2px)}
h2{margin-top:0}
.muted{color:var(--muted)}
/* ensure links inside muted text remain muted */
.muted a{color:var(--muted);text-decoration:underline}

.about{background:#f8f8fb}
body{
	margin:0;
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color:var(--fg);
	background:linear-gradient(180deg,var(--bg),#06040a);
	line-height:1.5;
}

header{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--fg);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1rem}
.hero{padding:4rem 0;color:var(--fg);text-align:center}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:calc(var(--radius) - 4px)}
.hero .btn{background:var(--accent);color:var(--fg);padding:.6rem 1rem;border-radius:calc(var(--radius) - 2px);text-decoration:none;font-weight:600}
.gallery .thumb{padding:0;border:0;background:transparent;cursor:pointer;width:100%}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--fg);border-radius:calc(var(--radius) - 2px)}
.gallery figcaption{margin-top:.5rem;font-size:.9rem;color:var(--muted)}
.about{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}

/* Lightbox */
.gallery figure{margin:0;background:var(--card);border-radius:var(--radius);padding:.5rem;display:flex;flex-direction:column;align-items:center}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:calc(var(--radius) - 4px);background:linear-gradient(180deg, rgba(0,0,0,0.2), transparent)}
.lightbox .lightbox-content{max-width:90%;max-height:80%;text-align:center;border-radius:var(--radius);padding:1rem}
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(6,4,10,.9), rgba(6,3,12,.98));color:var(--fg);visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s linear}
.lightbox img{max-width:100%;max-height:70vh;border-radius:calc(var(--radius) - 4px);display:block;margin:0 auto}
.lightbox img{transition:opacity .35s ease, transform .35s ease}
.lightbox img.fading{opacity:0;transform:scale(.995)}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.lightbox .caption{margin-top:.5rem;color:#ddd}
.lightbox .lightbox-content{max-width:90%;max-height:80%;text-align:center;border-radius:var(--radius);padding:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.lightbox .close,.lightbox .prev,.lightbox .next{position:absolute;top:1rem;background:transparent;border:0;color:#fff;font-size:2rem;padding:.25rem .5rem;cursor:pointer}
.lightbox .close{right:1rem}
.lightbox .prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox .next{right:1rem;top:50%;transform:translateY(-50%)}

.contact form{max-width:720px}
label{display:block;margin-top:1rem;font-weight:600}
input[type="text"],input[type="email"],textarea{width:100%;padding:.6rem;border-radius:calc(var(--radius) - 4px);border:1px solid #ddd;margin-top:.25rem}
.contact input[type="text"],.contact input[type="email"],.contact textarea{width:100%;padding:.6rem;border-radius:calc(var(--radius) - 4px);border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--fg);margin-top:.25rem}
/* form layout & feedback */
.form-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
#form-feedback{margin-top:.75rem;min-height:1.2rem;transition:color .12s ease}
.form-success{color:#7ad28c}
.form-error{color:#ff8b94}
.btn{background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:calc(var(--radius) - 2px);border:0;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid #ddd;color:var(--fg);border-radius:calc(var(--radius) - 2px)}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--fg);padding:.6rem 1rem;border-radius:calc(var(--radius) - 2px);border:0;cursor:pointer;box-shadow:0 6px 18px rgba(123,63,228,0.12)}
footer{border-top:1px solid #eee;padding:2rem 0;text-align:center;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--fg);border-radius:calc(var(--radius) - 2px)}

footer{border-top:1px solid rgba(255,255,255,0.04);padding:2rem 0;text-align:center;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);background:linear-gradient(180deg, transparent, rgba(255,255,255,0.01))}
@media (min-width:800px){
	header h1{font-size:1.5rem}
	.hero{padding:6rem 0}
	.gallery img{height:180px}
}

.btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
/* Mobile: stack header items vertically */
.muted a{color:var(--muted);opacity:0.9}
@media (max-width:799px){
	header .wrap{flex-direction:column;align-items:stretch}
	header nav{margin-left:0;margin-top:.5rem}
	nav ul{justify-content:center}
}

/* Focus states for accessibility */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(209,25,129,.25);outline-offset:2px}

/* Improve contrast for form inputs on dark background */
input[type="text"],input[type="email"],textarea{border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:var(--fg)}

/* Make muted text slightly brighter for legibility */
.muted{color:rgba(255,255,255,0.72)}

/* Simple entrance animations */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:none}

/* Hover/tap micro-interactions */
.thumb img{transition:transform .25s ease, box-shadow .25s ease;border-radius:calc(var(--radius) - 4px)}
.thumb:hover img,.thumb:focus img{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.btn{transition:transform .12s ease, box-shadow .12s ease}
.btn:active{transform:translateY(1px)}