*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;color:#e4e4e7;background:#09090b;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}a{color:#3b82f6;text-decoration:none;transition:color .2s ease}a:hover{color:#60a5fa}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}@media(max-width:768px){h1{font-size:2rem}h2{font-size:1.5rem}}.app{min-height:100vh}.header{position:fixed;top:0;left:0;right:0;z-index:100;background:#09090bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}.header-content{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#06b6d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.nav{display:flex;gap:2rem}.nav a{color:#a1a1aa;font-weight:500;transition:color .2s ease}.nav a:hover{color:#e4e4e7}@media(max-width:768px){.header-content{padding:1rem 1.5rem}.nav{gap:1rem}.nav a{font-size:.875rem}}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.1),transparent 70%);pointer-events:none}.hero-content{max-width:800px;text-align:center;position:relative;z-index:1}.hero-badge{display:inline-block;padding:.5rem 1rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:24px;font-size:.875rem;font-weight:500;color:#60a5fa;margin-bottom:1.5rem}.hero-title{font-size:3.5rem;margin-bottom:1.5rem;line-height:1.2}.gradient-text{background:linear-gradient(135deg,#3b82f6,#06b6d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-description{font-size:1.25rem;color:#a1a1aa;margin-bottom:2rem;line-height:1.8}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.875rem 2rem;border-radius:8px;font-weight:600;font-size:1rem;transition:all .2s ease;cursor:pointer;border:none}.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #3b82f666}.btn-secondary{background:transparent;color:#e4e4e7;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff0d;border-color:#ffffff4d}@media(max-width:768px){.hero-title{font-size:2.5rem}.hero-description{font-size:1rem}.hero-buttons{flex-direction:column}.btn{width:100%}}.projects{padding:6rem 2rem;background:linear-gradient(180deg,#09090b,#18181b)}.container{max-width:1200px;margin:0 auto}.section-title{text-align:center;margin-bottom:4rem;font-size:2.5rem}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}.project-card{background:#18181bcc;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease}.project-card:hover{transform:translateY(-4px);border-color:#3b82f680;box-shadow:0 12px 40px #3b82f626}.project-category{color:#3b82f6;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.project-title{font-size:1.5rem;margin-bottom:1rem;color:#e4e4e7}.project-description{color:#a1a1aa;margin-bottom:1.5rem;line-height:1.6}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tag{padding:.25rem .75rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:16px;font-size:.75rem;color:#60a5fa}.project-links{display:flex;flex-wrap:wrap;gap:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.05)}.project-link{color:#3b82f6;font-weight:500;font-size:.875rem;transition:color .2s ease}.project-link:hover{color:#60a5fa}@media(max-width:768px){.projects{padding:4rem 1.5rem}.projects-grid{grid-template-columns:1fr}}.videos{padding:6rem 2rem;background:linear-gradient(180deg,#09090b,#18181b)}.videos-header{text-align:center;margin-bottom:4rem}.section-subtitle{font-size:1.125rem;color:#a1a1aa;margin-top:1rem}.subsection-title{font-size:1.875rem;margin-bottom:2rem;color:#e4e4e7}.videos-section{margin-bottom:5rem}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem}.video-card{cursor:pointer;border-radius:12px;overflow:hidden;background:#18181b99;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.video-card:hover{transform:translateY(-8px);border-color:#3b82f680;box-shadow:0 16px 40px #3b82f633}.video-thumbnail{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;background:#000}.video-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.video-card:hover .video-thumbnail img{opacity:0}.video-preview{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s ease}.video-card:hover .video-preview{opacity:1;pointer-events:auto}.video-preview iframe{width:100%;height:100%;border:none}.video-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none}.video-card:hover .video-overlay{opacity:0}.play-button{width:60px;height:60px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;transition:transform .3s ease}.video-card:hover .play-button{transform:scale(1.1)}.video-info{padding:1.5rem}.platform-badge{display:inline-block;padding:.375rem .875rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:20px;font-size:.75rem;color:#60a5fa;margin-bottom:.75rem}.creator-name{color:#a1a1aa;font-size:.875rem}.testimonials-section{margin-bottom:5rem}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.testimonial-card{background:#18181b99;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease}.testimonial-card:hover{border-color:#3b82f64d;box-shadow:0 8px 32px #3b82f61a}.stars{display:flex;gap:.25rem;margin-bottom:1rem}.star{color:#fbbf24;font-size:1.25rem}.testimonial-text{color:#e4e4e7;font-size:1rem;line-height:1.6;margin-bottom:1rem;font-style:italic}.testimonial-author{color:#3b82f6;font-weight:600;font-size:.95rem}.software-section{margin-bottom:2rem}.software-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.software-card{background:#18181b99;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease}.software-card:hover{border-color:#3b82f680;background:#18181be6;transform:translateY(-4px)}.software-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;gap:1rem}.software-name{color:#e4e4e7;font-size:1.25rem}.software-level{padding:.375rem .875rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:16px;font-size:.75rem;color:#60a5fa;white-space:nowrap}.software-description{color:#a1a1aa;font-size:.9rem;margin-bottom:1.5rem;line-height:1.5}.proficiency-bar{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.proficiency-fill{height:100%;border-radius:3px;transition:width .6s ease}.proficiency-fill.expert{width:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa)}.proficiency-fill.intermediate{width:75%;background:linear-gradient(90deg,#3b82f6,#60a5fa)}.proficiency-fill.beginner{width:50%;background:linear-gradient(90deg,#3b82f6,#60a5fa)}@media(max-width:768px){.videos{padding:4rem 1.5rem}.videos-grid,.software-grid{grid-template-columns:1fr}.subsection-title{font-size:1.5rem}}.skills{padding:6rem 2rem;background:#09090b}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.skill-category{background:#18181b99;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .3s ease}.skill-category:hover{border-color:#3b82f64d;background:#18181bcc}.category-title{font-size:1.25rem;margin-bottom:1.5rem;color:#e4e4e7;padding-bottom:1rem;border-bottom:2px solid rgba(59,130,246,.3)}.skill-list{list-style:none}.skill-item{color:#a1a1aa;font-size:.95rem;position:relative;padding:.75rem 0 .75rem 1.5rem}.skill-item:before{content:"▹";position:absolute;left:0;color:#3b82f6;font-weight:700}@media(max-width:768px){.skills{padding:4rem 1.5rem}.skills-grid{grid-template-columns:1fr}}.social{padding:6rem 2rem;background:linear-gradient(180deg,#18181b,#09090b)}.social-subtitle{text-align:center;color:#a1a1aa;font-size:1.125rem;margin-bottom:3rem;max-width:600px;margin-left:auto;margin-right:auto}.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:900px;margin:0 auto}.social-card{display:flex;align-items:center;gap:1.5rem;background:#18181b99;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;transition:all .3s ease;cursor:pointer}.social-card:hover{transform:translateY(-4px);border-color:#3b82f680;background:#18181be6;box-shadow:0 8px 32px #3b82f633}.social-icon{font-size:2rem;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#3b82f61a;border-radius:12px;flex-shrink:0}.social-info{flex:1}.social-platform{font-weight:600;color:#e4e4e7;margin-bottom:.25rem;font-size:1rem}.social-handle{color:#a1a1aa;font-size:.875rem}@media(max-width:768px){.social{padding:4rem 1.5rem}.social-grid{grid-template-columns:1fr}}.footer{background:#09090b;border-top:1px solid rgba(255,255,255,.1);padding:3rem 2rem}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem}.footer-text{color:#a1a1aa;font-size:.875rem}.footer-text p{margin-bottom:.5rem}.copyright{color:#71717a}.footer-links{display:flex;gap:2rem}.footer-links a{color:#a1a1aa;font-size:.875rem;transition:color .2s ease}.footer-links a:hover{color:#3b82f6}@media(max-width:768px){.footer-content{flex-direction:column;text-align:center}.footer-links{flex-direction:column;gap:1rem}}