*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #08080f;--bg-secondary: #0f0f1a;--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .08);--border-hover: rgba(124, 58, 237, .5);--purple: #7c3aed;--blue: #2563eb;--cyan: #06b6d4;--pink: #ec4899;--amber: #f59e0b;--grad-main: linear-gradient(135deg, #7c3aed, #2563eb, #06b6d4);--grad-alt: linear-gradient(135deg, #ec4899, #7c3aed, #2563eb);--grad-text: linear-gradient(90deg, #a78bfa, #60a5fa, #22d3ee);--text-primary: #f0f0f8;--text-secondary: #8888aa;--text-muted: #55556a;--font-sans: "Inter", system-ui, sans-serif;--font-display: "Space Grotesk", system-ui, sans-serif;--radius: 16px;--radius-sm: 10px;--shadow-glow: 0 0 40px rgba(124, 58, 237, .15);--shadow-card: 0 8px 32px rgba(0, 0, 0, .4)}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}::selection{background:#7c3aed66;color:#fff}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;font-family:inherit}img{max-width:100%;display:block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}.section{padding:100px 0;position:relative}.container{max-width:1100px;margin:0 auto;padding:0 24px}.section-label{font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}.section-title{font-family:var(--font-display);font-size:clamp(28px,5vw,42px);font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:16px}.grad-text{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(10px) rotate(-3deg)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@media (max-width: 768px){.section{padding:70px 0}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:all .3s ease}.navbar.scrolled{background:#08080fd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:14px 0;box-shadow:0 4px 30px #0000004d}.navbar-inner{display:flex;align-items:center;justify-content:space-between}.navbar-logo{font-family:var(--font-display);font-size:20px;font-weight:700;cursor:pointer;color:var(--text-primary);letter-spacing:-.5px;-webkit-user-select:none;user-select:none}.logo-bracket{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-links{display:flex;list-style:none;gap:8px;align-items:center}.navbar-links button{background:none;color:var(--text-secondary);font-size:14px;font-weight:500;padding:8px 16px;border-radius:8px;transition:all .2s ease;letter-spacing:.3px}.navbar-links button:hover{color:var(--text-primary);background:var(--bg-card)}.hamburger{display:none;flex-direction:column;gap:5px;background:none;padding:4px}.hamburger span{display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s ease}.hamburger span.open:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger span.open:nth-child(2){opacity:0}.hamburger span.open:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media (max-width: 640px){.hamburger{display:flex}.navbar-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#08080ff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:16px;border-bottom:1px solid var(--border);gap:4px}.navbar-links.open{display:flex}.navbar-links button{width:100%;text-align:left;padding:12px 16px}}.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px}.hero-orbs{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:float 10s ease-in-out infinite}.orb-1{width:500px;height:500px;background:radial-gradient(circle,#7c3aed,transparent 70%);top:-100px;right:-100px;animation-delay:0s}.orb-2{width:400px;height:400px;background:radial-gradient(circle,#2563eb,transparent 70%);bottom:0;left:-80px;animation-delay:-3s}.orb-3{width:300px;height:300px;background:radial-gradient(circle,#ec4899,transparent 70%);top:40%;left:50%;animation-delay:-6s;opacity:.2}.hero-content{position:relative;z-index:1;animation:fadeInUp .8s ease both}.hero-greeting{font-size:18px;color:var(--text-secondary);font-weight:400;margin-bottom:12px;letter-spacing:.5px}.hero-name{font-family:var(--font-display);font-size:clamp(44px,8vw,80px);font-weight:700;line-height:1.05;letter-spacing:-2px;color:var(--text-primary);margin-bottom:16px}.hero-name-alias{background:var(--grad-text);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;font-size:.75em;letter-spacing:-1px}.hero-role{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}.role-badge{display:inline-flex;align-items:center;gap:8px;background:#7c3aed26;border:1px solid rgba(124,58,237,.4);color:#a78bfa;font-size:14px;font-weight:600;padding:6px 16px;border-radius:100px;letter-spacing:.5px}.role-badge:before{content:"";width:8px;height:8px;background:#7c3aed;border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 8px #7c3aed}.role-badge--creator{background:#ec489926;border-color:#ec489966;color:#f9a8d4}.role-badge--creator:before{background:#ec4899;box-shadow:0 0 8px #ec4899}.hero-bio{font-size:17px;color:var(--text-secondary);max-width:480px;line-height:1.7;margin-bottom:40px}.hero-bio strong{color:var(--text-primary);font-weight:600}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:64px}.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:13px 26px;border-radius:12px;transition:all .25s ease;letter-spacing:.3px}.btn-primary{background:var(--grad-main);color:#fff;box-shadow:0 4px 20px #7c3aed66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #7c3aed8c}.btn-ghost{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-card-hover);border-color:#7c3aed66;transform:translateY(-2px)}.hero-scroll-hint{display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;opacity:.5;transition:opacity .2s}.hero-scroll-hint:hover{opacity:.8}.hero-scroll-hint span{font-size:12px;color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase}.scroll-mouse{width:22px;height:34px;border:2px solid var(--text-secondary);border-radius:12px;display:flex;justify-content:center;padding-top:5px}.scroll-dot{width:4px;height:8px;background:var(--text-secondary);border-radius:2px;animation:float 1.8s ease-in-out infinite}@media (max-width: 640px){.hero-name{letter-spacing:-1px}.hero-bio{font-size:15px}}.about-grid{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start;margin-top:48px}.about-text p{color:var(--text-secondary);font-size:16px;line-height:1.8;margin-bottom:18px}.about-text p strong{color:var(--text-primary);font-weight:600}.about-highlights{margin-top:32px;display:flex;flex-direction:column;gap:14px}.highlight-item{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:14px}.highlight-item svg{color:#7c3aed;flex-shrink:0}.highlight-item--active{color:var(--text-primary)}.highlight-item--active svg{color:#06b6d4}.highlight-item--active em{font-style:normal;font-size:11px;font-weight:600;color:#06b6d4;background:#06b6d41a;border:1px solid rgba(6,182,212,.25);padding:2px 8px;border-radius:100px;margin-left:6px;vertical-align:middle}.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;display:flex;flex-direction:column;gap:6px;transition:all .25s ease}.stat-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.stat-value{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1}.stat-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 900px){.about-grid{grid-template-columns:1fr;gap:40px}.about-stats{grid-template-columns:repeat(4,1fr)}}@media (max-width: 600px){.about-stats{grid-template-columns:1fr 1fr}}.section-alt{background:var(--bg-secondary)}.projects-subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:48px;margin-top:8px}.projects-subtitle strong{color:var(--text-primary)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px;cursor:pointer;overflow:hidden;transition:all .3s ease;text-decoration:none;color:inherit}.project-card-glow{position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);opacity:0;transition:opacity .3s ease}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top left,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}.project-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-6px);box-shadow:0 20px 50px #0006,0 0 30px color-mix(in srgb,var(--accent) 20%,transparent)}.project-card:hover .project-card-glow{opacity:1}.project-card:hover:before{opacity:1}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.project-icon{font-size:32px;line-height:1}.project-link-icon{color:var(--text-muted);transition:color .2s,transform .2s;display:flex;align-items:center}.project-card:hover .project-link-icon{color:var(--text-primary);transform:translate(3px,-3px)}.project-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.2}.project-url{font-size:12px;color:var(--accent);font-weight:500;font-family:monospace;letter-spacing:.5px}.project-desc{font-size:14px;color:var(--text-secondary);line-height:1.7;flex:1}.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.tag{font-size:11px;font-weight:600;color:var(--text-muted);background:#ffffff0d;border:1px solid var(--border);padding:4px 10px;border-radius:100px;letter-spacing:.3px;text-transform:uppercase}@media (max-width: 900px){.projects-grid{grid-template-columns:1fr;max-width:520px}}.showreel-subtitle{color:var(--text-secondary);font-size:16px;margin-top:8px;margin-bottom:48px}.series-list{display:flex;flex-direction:column;gap:40px}.series-card{display:grid;padding-left:24px;grid-template-columns:1fr 400px;gap:40px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}.series-card:hover{border-color:color-mix(in srgb,var(--series-color) 40%,transparent);box-shadow:0 12px 40px #0000004d,0 0 40px color-mix(in srgb,var(--series-color) 10%,transparent)}.series-embed{position:relative;aspect-ratio:16 / 9;background:#000;overflow:hidden}.embed-poster{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;overflow:hidden}.embed-poster-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#0f172a,#1e1b4b 40%,#0f172a);background-size:200% 200%;animation:gradientShift 6s ease infinite}.embed-poster-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:background .3s}.embed-poster:hover .embed-poster-overlay{background:#0000004d}.embed-poster-overlay span{font-size:13px;font-weight:600;color:#fff;letter-spacing:1px;text-transform:uppercase}.play-btn{width:64px;height:64px;background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .25s ease}.embed-poster:hover .play-btn{background:var(--series-color, #7c3aed);border-color:var(--series-color, #7c3aed);transform:scale(1.1);box-shadow:0 0 30px color-mix(in srgb,var(--series-color, #7c3aed) 60%,transparent)}.embed-frame-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.embed-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;background:#000}.embed-frame{width:100%;height:100%;border:none;display:block}.series-info{padding:32px 32px 32px 0;display:flex;flex-direction:column;gap:16px}.series-header{display:flex;align-items:flex-start;gap:14px}.series-icon{font-size:28px;line-height:1;margin-top:2px}.series-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.2}.series-channel{font-size:12px;color:var(--text-muted);font-weight:500;margin-top:4px;display:block}.series-desc{font-size:14px;color:var(--text-secondary);line-height:1.75}.series-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}.series-tags{display:flex;flex-wrap:wrap;gap:6px}.series-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:color-mix(in srgb,var(--series-color) 90%,white);background:color-mix(in srgb,var(--series-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--series-color) 35%,transparent);padding:7px 14px;border-radius:8px;white-space:nowrap;transition:all .2s ease;text-decoration:none}.series-link:hover{background:color-mix(in srgb,var(--series-color) 22%,transparent);transform:translateY(-1px)}.anim-divider{display:flex;align-items:center;gap:16px;margin:56px 0 32px}.anim-divider:before,.anim-divider:after{content:"";flex:1;height:1px;background:var(--border)}.anim-divider span{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}.anim-list{display:flex;flex-direction:column;gap:32px}.anim-card{padding-left:24px;display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}.anim-card:hover{border-color:color-mix(in srgb,var(--anim-color) 40%,transparent);box-shadow:0 12px 40px #0000004d,0 0 40px color-mix(in srgb,var(--anim-color) 10%,transparent)}.anim-video-wrapper{position:relative;aspect-ratio:16 / 9;background:#000;overflow:hidden}.anim-video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.anim-occasion-badge{position:absolute;top:14px;left:14px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--anim-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--anim-color) 60%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 12px;border-radius:100px}.anim-info{padding:32px 32px 32px 0;display:flex;flex-direction:column;gap:16px}.anim-header{display:flex;align-items:flex-start;gap:14px}.anim-title-malay{font-size:.65em;font-weight:400;color:var(--text-muted);font-style:italic}@media (max-width: 900px){.series-card{grid-template-columns:1fr;padding-left:0}.series-embed{aspect-ratio:16 / 9;position:relative;height:auto}.series-info{padding:0 24px 28px}.series-footer{flex-direction:column;align-items:flex-start}.anim-card{padding-left:24px;grid-template-columns:1fr}.anim-info{padding:0 24px 28px}}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}.skill-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:all .25s ease}.skill-group:hover{border-color:color-mix(in srgb,var(--group-color) 40%,transparent);box-shadow:0 8px 30px #0000004d,0 0 20px color-mix(in srgb,var(--group-color) 10%,transparent)}.skill-group-header{display:flex;align-items:center;gap:10px;margin-bottom:18px}.skill-group-dot{width:10px;height:10px;border-radius:50%;background:var(--group-color);box-shadow:0 0 8px var(--group-color);flex-shrink:0}.skill-group-title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.skill-badges{display:flex;flex-wrap:wrap;gap:8px}.skill-badge{font-size:13px;font-weight:500;color:var(--text-primary);background:#ffffff0f;border:1px solid rgba(255,255,255,.1);padding:6px 14px;border-radius:8px;transition:all .2s ease;cursor:default}.skill-badge:hover{background:color-mix(in srgb,var(--group-color) 15%,transparent);border-color:color-mix(in srgb,var(--group-color) 50%,transparent);color:#fff;transform:translateY(-2px)}.soft-skills-section{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}.soft-skills-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-secondary);margin-bottom:20px}.soft-skills-list{display:flex;flex-wrap:wrap;gap:10px}.soft-badge{font-size:13px;font-weight:500;padding:8px 18px;border-radius:100px;background:#7c3aed1a;border:1px solid rgba(124,58,237,.25);color:#a78bfa;transition:all .2s;cursor:default}.soft-badge:hover{background:#7c3aed33;border-color:#7c3aed80;transform:translateY(-2px)}@media (max-width: 700px){.skills-grid{grid-template-columns:1fr}}.contact-intro{color:var(--text-secondary);font-size:16px;max-width:480px;line-height:1.7;margin-top:8px;margin-bottom:48px}.contact-grid{display:flex;flex-direction:column;gap:16px;max-width:600px}.contact-card{display:flex;align-items:center;gap:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:inherit;transition:all .25s ease;position:relative;overflow:hidden}.contact-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-color);opacity:0;transition:opacity .25s}.contact-card:hover{background:var(--bg-card-hover);border-color:color-mix(in srgb,var(--card-color) 40%,transparent);transform:translate(6px);box-shadow:-4px 0 20px color-mix(in srgb,var(--card-color) 15%,transparent)}.contact-card:hover:before{opacity:1}.contact-card-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:color-mix(in srgb,var(--card-color) 12%,transparent);border-radius:12px;transition:background .25s}.contact-card:hover .contact-card-icon{background:color-mix(in srgb,var(--card-color) 20%,transparent)}.contact-card-info{flex:1;display:flex;flex-direction:column;gap:3px}.contact-card-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.contact-card-value{font-size:15px;color:var(--text-primary);font-weight:500}.contact-card-arrow{color:var(--text-muted);flex-shrink:0;transition:transform .25s,color .25s}.contact-card:hover .contact-card-arrow{transform:translate(4px);color:var(--card-color)}@media (max-width: 600px){.contact-card-value{font-size:13px;word-break:break-all}}.footer{border-top:1px solid var(--border);padding:40px 0;background:var(--bg-primary)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer-logo{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-secondary)}.footer-logo .logo-bracket{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-copy,.footer-domain{font-size:13px;color:var(--text-muted)}.footer-domain a{color:#a78bfa;font-weight:500;transition:color .2s}.footer-domain a:hover{color:#c4b5fd}@media (max-width: 600px){.footer-inner{flex-direction:column;text-align:center}}