:root{
	--bg:#0b0c10;
	--bg-2:#0f1117;
	--card:rgba(255,255,255,.08);
	--card-2:rgba(255,255,255,.06);
	--glass-border:rgba(255,255,255,.18);
	--text:#e6e8eb;
	--muted:#a7b0b6;
	--accent:#62d6ff;
	--accent-2:#b8f1ff;
	--shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	color:var(--text);
	background: radial-gradient(1200px 900px at 10% -10%, #13233b 0%, transparent 60%),
							radial-gradient(900px 900px at 100% 0%, #2d123b 0%, transparent 50%),
							var(--bg);
	overflow-x:hidden;
}
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;width:42vmax;height:42vmax;filter:blur(40px);opacity:.35;mix-blend-mode:screen;border-radius:50%;
	background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
	animation: float 18s ease-in-out infinite;
}
.blob.b1{left:-10vmax;top:-8vmax}
.blob.b2{right:-6vmax;top:-10vmax;animation-duration:22s;animation-delay:-4s;background: radial-gradient(circle at 60% 20%, #ff6bd6, transparent 60%)}
.blob.b3{left:20vmax;bottom:-14vmax;animation-duration:26s;animation-delay:-8s;background: radial-gradient(circle at 40% 70%, #7ef9c6, transparent 60%)}
.grain{position:absolute;inset:-50%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".05"/></svg>');opacity:.35;animation:grain 12s steps(12) infinite}

@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-20px,0) scale(1.05)}}
@keyframes grain{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10%,10%,0)}}
.glass{
	background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
	border:1px solid var(--glass-border);
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-radius:16px;
}
.glass.subtle{-webkit-backdrop-filter: blur(10px) saturate(120%);backdrop-filter: blur(10px) saturate(120%);border-color:rgba(255,255,255,.14)}
.nav{position:sticky;top:16px;margin:16px auto;max-width:1100px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;letter-spacing:.2px}
.brand img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.links a{color:var(--text);text-decoration:none;margin-left:8px;padding:8px 12px;border-radius:10px;border:1px solid transparent}
.links a:hover{border-color:var(--glass-border);background:rgba(255,255,255,.04)}
.btn.small{padding:8px 12px}
.hero{display:grid;place-items:center;min-height:72vh;padding:32px}
.hero__card{max-width:900px;padding:32px 28px;position:relative;isolation:isolate}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--glass-border);font-size:.9rem;color:var(--accent)}
.title{margin:18px 0 8px;font-size:clamp(28px, 6vw, 52px);line-height:1.1;letter-spacing:-.02em}
.sub{margin:0 0 18px;color:var(--muted);font-size:clamp(15px, 2.2vw, 18px)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,.02);color:var(--text);text-decoration:none}
.btn.primary{background:linear-gradient(180deg, rgba(98,214,255,.3), rgba(184,241,255,.1));border-color:rgba(98,214,255,.5)}
.btn:hover{background:rgba(255,255,255,.06)}
.social{list-style:none;display:flex;gap:14px;padding:0;margin:16px 0 0}
.social a{color:var(--muted);text-decoration:none;border-bottom:1px dotted transparent}
.social a:hover{color:var(--text);border-bottom-color:var(--glass-border)}
.section{padding:48px 24px}
.grid{max-width:1100px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column: span 4;padding:22px}
.card h3{margin:6px 0 8px}
.card p{margin:0;color:var(--muted)}
.section__title{max-width:1100px;margin:0 auto 16px;padding:0 4px;font-size:clamp(22px,3.5vw,32px)}
.work.grid{align-items:stretch}
.work__item{grid-column: span 4;min-height:160px;padding:18px;text-decoration:none;color:var(--text);position:relative;overflow:hidden}
.work__item::after{content:"";position:absolute;inset:0;background: radial-gradient(600px 160px at 0% 0%, rgba(98,214,255,.12), transparent 60%)}
.work__meta{position:relative}
.work__meta h4{margin:2px 0 6px}
.work__meta p{margin:0;color:var(--muted)}
.contact__card{max-width:900px;margin:0 auto;padding:28px}
.footer{max-width:1100px;margin:40px auto;padding:0 16px 60px;color:var(--muted);text-align:center}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
[data-reveal].revealed{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform .2s ease}
@media (max-width: 900px){
	.card{grid-column: span 6}
	.work__item{grid-column: span 6}
}
@media (max-width: 640px){
	.links{display:none}
	.hero{min-height:66vh}
	.grid{grid-template-columns:repeat(6,1fr)}
	.card{grid-column: 1 / -1}
	.work__item{grid-column: 1 / -1}
}
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	.blob,.grain{animation:none}
	[data-reveal]{opacity:1;transform:none}
}
:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --text: #0f1222;
  --muted: #5b6275;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-stroke: rgba(24, 24, 24, 0.08);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --text: #e8ebf1;
    --muted: #a4abbc;

    --glass-bg: rgba(16, 18, 24, 0.5);
    --glass-stroke: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}
html, body {
  background-color: var(--bg); 
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.glass.subtle {
  background: color-mix(in oklab, var(--glass-bg) 70%, transparent);
  box-shadow: none;
}
html, body {
  height: 100%;
  overscroll-behavior-y: none;
}
#page {
  transform: scaleY(var(--stretch-y, 1));
  transform-origin: 50% var(--stretch-origin, 50%);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #page { transition: none; }
}
#page.is-stretching {
   opacity: .995; 
}
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
html, body {
  margin: 0;
}
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.nav {
  position: sticky;        
  top: 12px;              
  z-index: 9999;           
  isolation: isolate;     
}
.hero__card,
.card,
.work__item,
.contact__card {
  position: relative;
  z-index: 0;             
}
*[data-tilt],
[data-reveal] {
  z-index: 0;
}
a {
  position: relative;
  z-index: 1;
}
.nav{
  position:fixed;
  top: 12px;                 
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1100px;
  margin: 0;               
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 99999;          
  isolation: isolate;
  pointer-events: auto;
}
#nav-spacer{
  height: 88px; 
}
.hero__card,
.card,
.work__item,
.contact__card {
  position: relative;
  z-index: 0;
}
.typing::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 8px;
  vertical-align: middle;
  animation: typing-blink 900ms steps(1) infinite;
}
@keyframes typing-blink{
  50% { opacity: 0; }
}
/* Respect reduced-motion for caret */
@media (prefers-reduced-motion: reduce){
  .typing::after { animation: none; opacity: 1; }

}