*{box-sizing:border-box;margin:0;padding:0}html{height:100%;overflow-x:hidden;overflow-y:scroll;scroll-snap-type:y proximity;-webkit-text-size-adjust:100%}body{background:#000;font-family:system-ui,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}#bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}#bg-fallback{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 85% 60%,rgba(197,180,253,.8),transparent),radial-gradient(1px 1px at 15% 85%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 55% 45%,rgba(165,180,252,.7),transparent),radial-gradient(1px 1px at 90% 90%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 30% 55%,rgba(255,255,255,.6),transparent),radial-gradient(900px 600px at 50% 40%,rgba(70,60,120,.25),transparent 70%),#000;background-repeat:repeat;background-size:400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,400px 400px,100% 100%,100% 100%}.hero,.projects-section{position:relative;z-index:1}.hero{min-height:100vh;min-height:100dvh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:60px 20px 100px}.card{background:#ffffff08;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);padding:48px 56px 40px;border-radius:28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;color:#fff;box-shadow:0 20px 60px #0009,inset 0 1px #ffffff14;max-width:440px;width:100%}.avatar{width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.15);box-shadow:0 0 0 6px #ffffff0a,0 0 40px #788cff59;flex-shrink:0;object-fit:cover;animation:avatar-glow 4s ease-in-out infinite}@keyframes avatar-glow{0%,to{box-shadow:0 0 0 6px #ffffff0a,0 0 40px #788cff59}50%{box-shadow:0 0 0 6px #ffffff12,0 0 60px #a078ff80}}.card h1{font-size:30px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,#fff 20%,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.card>div>p{margin:6px 0 22px;color:#ffffff80;font-size:13px;text-transform:uppercase;letter-spacing:.22em}.buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.buttons a{background:transparent;border:1px solid rgba(255,255,255,.18);color:#ffffffd9;text-decoration:none;padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:background .2s,color .2s,border-color .2s,transform .2s}.buttons a:hover{background:#fff;color:#111;border-color:#fff;transform:translateY(-2px)}.project-link{background:#4c4c4c;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:background .2s}.project-link:hover{background:#3f3f3f}.buttons svg,.project-link svg{width:16px;height:16px;flex-shrink:0}.view-counter{margin-top:20px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#a5b4fc0f;border:1px solid rgba(165,180,252,.2);color:#ffffffbf;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 1px #ffffff0f,0 0 20px #8c82ff1f}.view-counter svg{width:15px;height:15px;flex-shrink:0;color:#a5b4fc}.view-count{color:#fff;font-variant-numeric:tabular-nums;font-weight:700;text-shadow:0 0 12px rgba(165,180,252,.5)}.view-label{color:#ffffff80;text-transform:uppercase;font-size:11px;letter-spacing:.14em}.scroll-hint{position:absolute;bottom:32px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff6;font-size:13px;cursor:pointer;transition:color .2s;-webkit-user-select:none;user-select:none}.scroll-hint:hover{color:#ffffffb3}.arrow-anim{animation:bounce 1.4s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.site-footer{position:relative;z-index:1;padding:32px 24px 40px;text-align:center;color:#ffffff4d;font-size:13px;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.projects-section{min-height:100vh;min-height:100dvh;scroll-snap-align:start;width:100%;max-width:1040px;margin:0 auto;padding:90px 24px;text-align:center;display:flex;flex-direction:column;justify-content:center}.projects-section h2{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;background:linear-gradient(90deg,#fff 20%,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.projects-section .sub{color:#ffffff73;font-size:13px;text-transform:uppercase;letter-spacing:.22em;margin-bottom:56px}.projects-columns{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:24px}.projects-column{display:flex;flex-direction:column;gap:14px}.column-label{color:#ffffff73;font-size:12px;font-weight:700;text-transform:uppercase;text-align:left;margin-bottom:2px;letter-spacing:.18em;display:flex;align-items:center;gap:10px}.column-label:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);box-shadow:0 0 10px #a5b4fccc;flex-shrink:0}.column-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(165,180,252,.35),transparent)}.project-card{--mx: 50%;--my: 50%;position:relative;background:#ffffff08;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:22px;color:#fff;display:flex;flex-direction:column;gap:16px;text-align:left;overflow:hidden;box-shadow:0 12px 36px #00000073,inset 0 1px #ffffff12;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(165,180,252,.14),transparent 65%);opacity:0;transition:opacity .3s ease;pointer-events:none}.project-card:hover:before{opacity:1}.project-card:hover{transform:translateY(-4px);border-color:#a5b4fc59;box-shadow:0 18px 44px #0000008c,0 0 32px #8c82ff2e,inset 0 1px #ffffff1a}.project-card.reveal{opacity:0;transform:translateY(24px)}.project-card.reveal.visible{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease}.project-card.reveal.visible:hover{transform:translateY(-4px)}.project-top{display:flex;align-items:center;gap:14px}.project-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-weight:800;font-size:22px;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 14px #0006,0 0 18px #8c82ff1f;transition:box-shadow .25s ease,transform .25s ease}.project-card:hover .project-icon{transform:scale(1.05);box-shadow:0 6px 18px #00000080,0 0 26px #968cff4d}.project-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px}.project-name{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}.project-tags{display:flex;gap:6px;flex-wrap:wrap}.project-tags span{background:#a5b4fc14;border:1px solid rgba(165,180,252,.22);color:#c7d2fe;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;letter-spacing:.03em;text-shadow:0 0 12px rgba(165,180,252,.4)}.project-desc{font-size:13px;opacity:.6;line-height:1.55}.project-desc strong{color:#ffffffd9;font-weight:600}.project-links{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}.project-card .project-link{flex:1;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:999px;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}.project-card .project-link:hover{background:#fff;color:#111;border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #ffffff26}@media (max-width: 880px){.projects-columns{grid-template-columns:1fr;max-width:440px;margin:0 auto}}@media (max-width: 640px){.card{flex-direction:column;align-items:center;text-align:center}.buttons{justify-content:center}.hero{padding:48px 16px 88px}.projects-section{padding:72px 16px}.projects-section .sub{margin-bottom:40px}}@media (max-width: 480px){.card{padding:34px 22px 30px;border-radius:22px;gap:18px}.card h1{font-size:26px}.avatar{width:104px;height:104px}.buttons{gap:8px}.buttons a{padding:9px 15px;font-size:13px}.projects-section h2{font-size:27px}.project-card{padding:18px}.scroll-hint{bottom:22px}}@media (hover: none){.buttons a:hover{background:transparent;color:#ffffffd9;border-color:#ffffff2e;transform:none}.project-card:hover{transform:none;border-color:#ffffff14;box-shadow:0 12px 36px #00000073,inset 0 1px #ffffff12}.project-card:hover:before{opacity:0}.project-card:hover .project-icon{transform:none}.project-card.reveal.visible:hover{transform:translateY(0)}.project-card .project-link:hover{background:transparent;color:#ffffffd9;border-color:#ffffff29;transform:none;box-shadow:none}.buttons a:active,.project-card .project-link:active{background:#ffffff1f;border-color:#ffffff4d}}