*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;scroll-behavior:smooth}.no-bullets{list-style-type:none;padding:0;margin:0}body{background-color:#0f172a;color:#e5e7eb;line-height:1.6}a{color:#38bdf8;text-decoration:none;transition:color .2s ease}a:hover{color:#0ea5e9}.container{max-width:1200px;margin:0 auto;padding:2rem}h1,h2,h3,h4{font-weight:700;margin-bottom:1rem}h1{font-size:3rem}h2{font-size:2rem}.site-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:var(--color-secondary);position:sticky;top:0;width:100%;z-index:1000;transition:padding .3s ease,box-shadow .3s ease}.site-header.scrolled{padding:.6rem 2rem;box-shadow:0 6px 20px #00000040}.header-nav ul{display:flex;gap:var(--spacing-lg);list-style:none}.header-nav a{color:var(--color-text);font-weight:600;transition:color .2s ease}.header-nav a:hover{color:var(--color-primary)}.header-left{display:flex;align-items:center;gap:var(--spacing-sm)}.header-right{display:flex;align-items:center}@media(max-width:768px){.header-nav ul{display:none}}.header-nav a{position:relative;font-weight:500;color:var(--color-text);opacity:.8}.header-nav a.active{opacity:1;color:var(--color-primary)}.header-nav a.active:after{content:"";position:absolute;bottom:-6px;left:0;width:100%;height:2px;background-color:var(--color-primary)}.header-right{display:flex;align-items:center;gap:.75rem}.icon-btn{background:none;border:none;color:var(--color-text);font-size:1.2rem;cursor:pointer}.cta-btn{background-color:var(--color-primary);color:var(--color-secondary);padding:.5rem 1.25rem;border-radius:999px;font-weight:600;transition:transform .2s ease,background-color .2s ease}.cta-btn:hover{transform:translateY(-1px);background-color:#0ea5e9}.hamburger{display:none}@media(max-width:768px){.header-nav{position:absolute;top:100%;right:1rem;background-color:var(--color-secondary);border-radius:.75rem;padding:1rem;display:none}.header-nav.open{display:block}.header-nav ul{display:flex;flex-direction:column;gap:1rem}.hamburger{display:block}}button{background-color:#38bdf8;color:#0f172a;border:none;padding:.75rem 1.5rem;border-radius:.5rem;cursor:pointer;font-weight:600;transition:background-color .2s ease}button:hover{background-color:#0ea5e9}:root{--color-primary: #38bdf8;--color-secondary: #0f172a;--color-accent: #facc15;--color-text: #e5e7eb;--brand-color: #ffffff;--tn-mascot-muted: #94a3b8;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem}.light{--tn-mascot-primary: #0f172a;--tn-mascot-accent: #38bdf8;--tn-mascot-muted: #94a3b8}:root{--brand-color: #ffffff}body.light{--color-secondary: #ffffff;--color-text: #0f172a;--brand-color: #0b0f1a}.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem;text-decoration:none;color:var(--brand-color)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.hero-mascot img{max-width:320px;width:100%;height:auto}.hero-copy h1{font-size:clamp(2rem,4vw,3rem)}.hero-copy{max-width:560px}.hero-subtext{margin-bottom:1.5rem;color:var(--tn-mascot-muted);font-size:1.05rem}.hero-actions{display:flex;flex-direction:column;gap:.75rem}.hero-secondary{font-size:.95rem;color:var(--color-primary);opacity:.85}.hero-secondary:hover{opacity:1;text-decoration:underline}@media(max-width:768px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-mascot img{margin:0 auto}}.home-section{position:relative}.mascot{display:block}.mascot-head,.mascot-glasses,.mascot-cap,.mascot-smirk{fill:none;stroke:var(--brand-color);stroke-linecap:round;stroke-linejoin:round}.brand-mascot img{width:32px;height:32px;object-fit:contain;display:block}.brand:hover .brand-mascot img{transform:translateY(-1px);transition:transform .2s ease}.brand-mascot svg{z-index:1001;position:relative}.mascot-outline{fill:var(--tn-mascot-primary);stroke:var(--tn-mascot-primary);stroke-width:2;transition:transform .25s ease,fill .25s ease,stroke .25s ease}.brand:hover .mascot-outline{transform:translateY(-1px)}.brand-name{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text);transition:color .25s ease}.brand-nerd{color:var(--color-primary);transition:color .25s ease}@media(max-width:640px){.brand-name{font-size:1.1rem}.brand-mascot svg{width:40px}}.mascot-outline{fill:var(--tn-mascot-primary);stroke:var(--tn-mascot-primary)}#theme-toggle{background:none;border:2px solid var(--color-primary);border-radius:.5rem;color:var(--color-primary);padding:.25rem .5rem;cursor:pointer;font-size:1rem;transition:all .2s ease}#theme-toggle:hover{background-color:var(--color-primary);color:var(--color-secondary)}.section{padding:var(--spacing-lg) 0}.home-section h1{font-size:2.5rem;margin-bottom:var(--spacing-md)}.services-section ul{list-style:disc inside;margin-top:var(--spacing-md);gap:var(--spacing-sm);display:flex;flex-direction:column}.contact-section form{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.contact-section input,.contact-section textarea{padding:.5rem;border-radius:.25rem;border:1px solid var(--tn-mascot-muted);background-color:var(--color-secondary);color:var(--color-text)}.contact-section button{align-self:flex-start}@media(max-width:768px){.home-section h1{font-size:2rem}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}}.project-card{background-color:var(--color-secondary);border:1px solid var(--tn-mascot-muted);border-radius:.75rem;padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .25s ease,border-color .25s ease}.project-card:hover{transform:translateY(-5px);border-color:var(--color-primary)}.project-icon svg{width:64px;height:64px;margin-bottom:var(--spacing-sm)}.project-card h3{margin-bottom:var(--spacing-sm);color:var(--color-text)}.project-card p{color:var(--tn-mascot-muted)}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}
