:root{--bg-body:#f5f5f5;--bg-card:#ffffff;--bg-nav:rgba(255, 255, 255, 0.9);--text-main:#111827;--text-muted:#6b7280;--border-color:#e5e7eb;--primary-blue:#2563eb;--primary-blue-hover:#1d4ed8;--primary-green:#10b981;--primary-cyan:#06b6d4;--shadow-card:0 4px 6px -1px rgba(0, 0, 0, 0.1)}html.dark{--bg-body:#030712;--bg-card:rgba(255, 255, 255, 0.05);--bg-nav:rgba(3, 7, 18, 0.9);--text-main:#ffffff;--text-muted:#9ca3af;--border-color:rgba(255, 255, 255, 0.1);--shadow-card:0 4px 6px -1px rgba(0, 0, 0, 0.4)}body{font-family:Arial,sans-serif;margin:0;padding:0;background:var(--bg-body);color:var(--text-main);overflow-x:hidden;transition:background .3s,color .3s}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.page-section{animation:fadeInUp .4s ease forwards}.app-wrapper{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1024px;margin:0 auto;padding:0 1rem}.navbar{position:sticky;top:0;z-index:50;background:var(--bg-nav);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);transition:background .3s,border .3s}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:3.5rem}.nav-brand{font-size:1.125rem;font-weight:700;background:linear-gradient(to right,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer;border:none;background-color:transparent}.nav-links{display:flex;align-items:center;gap:.25rem}.nav-link{padding:.375rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background:0 0;color:var(--text-muted);transition:background .2s,color .2s}.nav-link:hover{background:var(--bg-card)}.nav-link.active{color:var(--primary-blue);background:rgba(37,99,235,.1)}html.dark .nav-link.active{background:rgba(37,99,235,.2)}.theme-btn{margin-left:.5rem;padding:.5rem;border-radius:.5rem;border:none;cursor:pointer;font-size:1.25rem;background:0 0;transition:background .2s}.theme-btn:hover{background:var(--bg-card)}.btn{padding:.75rem 2rem;border-radius:.75rem;font-weight:600;border:none;cursor:pointer;font-size:1rem;transition:opacity .2s,transform .2s}.btn:hover{opacity:.9}.btn-primary{background:var(--primary-blue);color:#fff}.btn-secondary{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-color)}.btn-gradient{background:linear-gradient(to right,var(--primary-green),var(--primary-cyan));color:#fff;width:100%}.home-section{text-align:center;padding:5rem 1rem;max-width:768px;margin:0 auto}.hero-img{width:10rem;height:10rem;border-radius:50%;object-fit:cover;border:4px solid var(--primary-blue);box-shadow:0 10px 15px -3px rgba(37,99,235,.3);margin-bottom:2rem}@media (min-width:768px){.hero-img{width:13rem;height:13rem}}.gradient-text{font-size:3rem;font-weight:800;background:linear-gradient(to right,#3b82f6,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (min-width:768px){.gradient-text{font-size:4.5rem}}.home-subtitle{color:var(--text-muted);font-size:1.25rem;margin:.5rem 0}.home-desc{color:var(--text-muted);max-width:28rem;margin:0 auto 2.5rem}.home-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.about-section{padding:5rem 1rem;max-width:768px;margin:0 auto}.section-title{font-size:2.25rem;font-weight:700;text-align:center;margin-bottom:3rem}.about-intro{display:flex;flex-direction:column;align-items:center;gap:2.5rem;margin-bottom:3rem}@media (min-width:768px){.about-intro{flex-direction:row}.about-intro .about-text{text-align:left}}.about-img{width:12rem;height:12rem;border-radius:1rem;object-fit:cover;border:2px solid rgba(139,92,246,.5);box-shadow:var(--shadow-card)}.about-text-title{font-size:1.5rem;font-weight:700;margin-bottom:.75rem}.about-text-p{color:var(--text-muted);line-height:1.625;margin-bottom:.75rem}.grid-3{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;padding:1.25rem;text-align:center;transition:background .2s,transform .2s}.card:hover{background:rgba(0,0,0,.02)}html.dark .card:hover{background:rgba(255,255,255,.08)}.card-icon{font-size:1.875rem;margin-bottom:.5rem}.card-title{font-weight:600}.card-desc{color:var(--text-muted);font-size:.875rem}.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}@media (min-width:768px){.grid-4{grid-template-columns:repeat(4,1fr)}}.fav-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;text-align:center;transition:all .3s ease}.fav-card:hover{transform:scale(1.05);box-shadow:var(--shadow-card)}.fav-icon{font-size:3.75rem;margin-bottom:1rem}.fav-title{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.fav-desc{color:var(--text-muted);font-size:.875rem}.fav-red:hover{border-color:#f87171}.fav-orange:hover{border-color:#fb923c}.fav-green:hover{border-color:#4ade80}.fav-blue:hover{border-color:#60a5fa}.footer{border-top:1px solid var(--border-color);padding:2rem 0;text-align:center;color:var(--text-muted);font-size:.875rem}.footer a{color:var(--text-muted);text-decoration:none;transition:color .15s}.footer a:hover{color:var(--text-main)}