:root{--violet:#7c3aed;--cyan:#06b6d4}body{overflow-x:hidden}.grid-bg{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(100,116,139,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,116,139,.07) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 88%)}.orb{position:absolute;border-radius:999px;filter:blur(100px);opacity:.18}.orb-one{width:540px;height:540px;background:#7c3aed;right:-100px;top:80px}.orb-two{width:430px;height:430px;background:#06b6d4;left:-120px;top:650px}.dark .grid-bg{background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px)}#navbar.scrolled{background:rgba(255,255,255,.8);backdrop-filter:blur(18px);border-color:rgba(148,163,184,.25);box-shadow:0 10px 35px rgba(15,23,42,.05)}.dark #navbar.scrolled{background:rgba(8,11,22,.78);border-color:rgba(255,255,255,.08)}.nav-link{font-size:.875rem;font-weight:650;color:#64748b;transition:.2s}.nav-link:hover,.nav-link.active{color:var(--violet)}.icon-btn{display:grid;height:44px;width:44px;place-items:center;border-radius:13px;border:1px solid rgba(148,163,184,.25);background:rgba(255,255,255,.5);font-size:18px}.dark .icon-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}.gradient-text{background:linear-gradient(100deg,#7c3aed,#2563eb 52%,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}.typing-cursor{height:1.4em;width:3px;background:#7c3aed;animation:blink .7s infinite}@keyframes blink{50%{opacity:0}}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:14px;padding:.9rem 1.3rem;font-weight:750;transition:.25s;text-decoration:none}.primary-btn{background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;box-shadow:0 14px 35px rgba(124,58,237,.24)}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(124,58,237,.33)}.secondary-btn{border:1px solid rgba(148,163,184,.3);background:rgba(255,255,255,.65)}.dark .secondary-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}.small{padding:.7rem 1rem;font-size:.85rem}.social-btn{display:grid;height:42px;width:42px;place-items:center;border-radius:12px;border:1px solid rgba(148,163,184,.25);font-weight:800;transition:.2s}.social-btn:hover{transform:translateY(-3px);border-color:#7c3aed;color:#7c3aed}.profile-glow{position:absolute;inset:8% -4%;background:linear-gradient(135deg,#7c3aed,#06b6d4);filter:blur(80px);opacity:.26}.float-badge{position:absolute;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(255,255,255,.8);padding:.8rem 1rem;box-shadow:0 15px 35px rgba(15,23,42,.12);font-size:.8rem;font-weight:800;backdrop-filter:blur(12px);animation:float 4s ease-in-out infinite}.dark .float-badge{background:rgba(15,23,42,.75);border-color:rgba(255,255,255,.1)}@keyframes float{50%{transform:translateY(-10px)}}.section{padding:8rem 0}.section-kicker{display:inline-block;margin-bottom:1rem;font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#7c3aed}.section-title{max-width:720px;font-size:clamp(2.5rem,5vw,4.4rem);font-weight:900;line-height:1;letter-spacing:-.05em}.section-copy{margin-top:1.25rem;color:#64748b;font-size:1.05rem}.stat-card{border:1px solid rgba(148,163,184,.22);border-radius:18px;padding:1.3rem;background:rgba(255,255,255,.5)}.dark .stat-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}.stat-card strong{display:block;font-size:1.9rem;font-weight:900;color:#7c3aed}.stat-card span{font-size:.78rem;color:#64748b}.skill-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;border:1px solid rgba(148,163,184,.2);border-radius:20px;background:white;padding:1.35rem;box-shadow:0 10px 35px rgba(15,23,42,.04);transition:.25s}.dark .skill-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}.skill-card:hover{transform:translateY(-5px);border-color:rgba(124,58,237,.5);box-shadow:0 20px 45px rgba(124,58,237,.1)}.skill-icon{display:grid;height:50px;width:50px;place-items:center;border-radius:14px;color:white;font-weight:900}.skill-card h3{font-weight:800}.skill-card p{font-size:.78rem;color:#64748b}.skill-card>span:last-child{font-size:.8rem;font-weight:800;color:#7c3aed}.project-card{display:grid;overflow:hidden;border:1px solid rgba(148,163,184,.22);border-radius:30px;background:rgba(248,250,252,.75);box-shadow:0 20px 60px rgba(15,23,42,.07)}.dark .project-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}.browser-preview{position:relative;min-height:420px;overflow:hidden;background:#e2e8f0}.browser-bar{display:flex;height:42px;align-items:center;gap:7px;padding:0 14px;background:#0f172a;color:#94a3b8;font-size:10px}.browser-bar i{height:8px;width:8px;border-radius:50%;background:#fb7185}.browser-bar i:nth-child(2){background:#facc15}.browser-bar i:nth-child(3){background:#4ade80}.browser-bar span{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-preview iframe{width:1440px;height:900px;transform:scale(.47);transform-origin:top left;border:0;pointer-events:none}.preview-overlay{position:absolute;inset:42px 0 0;background:linear-gradient(to top,rgba(15,23,42,.12),transparent 35%);pointer-events:none}.project-content{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:2.4rem}.project-number{font-size:.75rem;font-weight:900;color:#7c3aed}.project-type{font-size:.7rem;font-weight:850;letter-spacing:.17em;color:#06b6d4}.project-content h3{margin:.4rem 0 1rem;font-size:2.5rem;font-weight:900;letter-spacing:-.04em}.project-content p{line-height:1.75;color:#64748b}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}.tags span{border-radius:999px;background:rgba(124,58,237,.08);padding:.45rem .7rem;font-size:.7rem;font-weight:750;color:#7c3aed}.timeline-card{position:relative;margin-top:2rem;border-left:2px solid #7c3aed;padding:1.5rem 0 1.5rem 2rem}.timeline-card:before{content:'';position:absolute;left:-8px;top:28px;height:14px;width:14px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 7px rgba(124,58,237,.13)}.timeline-card>span{font-size:.72rem;font-weight:800;color:#7c3aed}.timeline-card h3{margin:.5rem 0;font-size:1.4rem;font-weight:850}.timeline-card p,.timeline-card small{display:block;color:#64748b}.service-row{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;border-bottom:1px solid rgba(148,163,184,.2);padding:1.1rem 0}.service-row b{color:#7c3aed}.service-row h3{font-weight:800}.service-row p{font-size:.85rem;color:#64748b}.contact-shell{display:grid;overflow:hidden;border-radius:32px;background:#10162a;color:white;box-shadow:0 30px 80px rgba(15,23,42,.22)}.contact-copy{padding:3rem;background:radial-gradient(circle at 10% 20%,rgba(124,58,237,.4),transparent 45%)}.contact-copy h2{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;line-height:1;letter-spacing:-.05em}.contact-copy h2 span{color:#67e8f9}.contact-copy>p{margin-top:1.5rem;color:#b6c2d6}.contact-copy a,.contact-copy .space-y-4>div{display:flex;align-items:center;gap:1rem}.contact-copy b{display:grid;height:42px;width:42px;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);color:#67e8f9}.contact-copy small{display:block;color:#7f90ad}.contact-form{display:flex;flex-direction:column;gap:1.25rem;background:#172036;padding:3rem}.contact-form label>span{display:block;margin-bottom:.5rem;font-size:.78rem;font-weight:750;color:#b6c2d6}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);padding:.85rem 1rem;color:white;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.1)}.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}@media(min-width:1024px){.project-card{grid-template-columns:1.18fr .82fr}.contact-shell{grid-template-columns:1fr 1fr}}@media(max-width:767px){.section{padding:5.5rem 0}.float-badge{display:none}.project-content{padding:1.6rem}.browser-preview{min-height:300px}.browser-preview iframe{transform:scale(.34)}.contact-copy,.contact-form{padding:2rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}.float-badge{animation:none}}
/* Scroll progress football */
.scroll-track{position:fixed;right:12px;top:96px;bottom:30px;width:4px;border-radius:999px;background:rgba(124,58,237,.13);z-index:45;pointer-events:none}.scroll-track:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#7c3aed,#06b6d4);transform:scaleY(var(--scroll-progress,0));transform-origin:top}.scroll-ball{position:absolute;left:50%;top:0;display:grid;width:31px;height:31px;place-items:center;border-radius:50%;background:white;box-shadow:0 6px 22px rgba(15,23,42,.22);font-size:19px;transform:translate(-50%,-50%) rotate(var(--ball-rotation,0deg));will-change:top,transform}.dark .scroll-ball{background:#172036}.education-timeline{position:relative}.education-timeline:before{content:'';position:absolute;left:0;top:28px;bottom:28px;width:2px;background:linear-gradient(#7c3aed,#06b6d4)}.education-timeline .timeline-card{margin-top:0;margin-bottom:.75rem;border-left:0}.contact-form button:disabled{opacity:.65;cursor:not-allowed}@media(max-width:767px){.scroll-track{right:6px;top:88px}.scroll-ball{width:27px;height:27px;font-size:16px}}